With a toggler on the left and brand name on the right: With a brand name shown on the left and toggler on the right: navbar-brand shown at the smallest breakpoint: Below are examples of different toggle styles. Reversing your markup will reverse the placement of the toggler. navbar-brand, they’ll automatically be aligned to the far right. Navbar togglers are left-aligned by default, but should they follow a sibling element like a. For navbars that always collapse, don’t add any. In combination with other utilities, you can easily choose when to show or hide particular elements.įor navbars that never collapse, add the.

navbar-expand classes to determine when their content collapses behind a button. Action Another action Something else here Link Search Responsive behaviors navbar-light for use with light background colors, or. Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities.

Place various form controls and components within a navbar: Action Another action Something else here Forms Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for.

You can also use dropdowns in your navbar. Navbar Home Features Pricing Disabled Īnd because we use classes for our navs, you can avoid the list-based approach entirely if you like. TextĪdd your text within an element with the. navbar-brand can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.

This example uses background ( bg-light) and spacing ( my-2, my-lg-0, me-sm-0, my-sm-0) utility classes. Action Another action Something else here Disabled Search

Pug template loop through navlinks