Skip to main content

Navigation

Overview#

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

How it works#

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Ensure accessibility by using a nav> element or, if using a more generic element such as a div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
  • Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

Examples#

face
menümenubrand name
action items

<uxf-nav style="position:relative; backgroundColor: gray;">    <section slot="appbar" style="position: relative;">        <div><uxf-icon class="text-danger">face</uxf-icon></div>        <h5>menü<uxf-icon class="text-danger">menu</uxf-icon>brand name</h5>        <div>action items</div>    </section></uxf-nav>


Info Message

close
closecloudleftitemleft
Headless Accelerator
rightloginpersonright

<uxf-nav>    <div slot="flash" class="top collapse">
        <div class="bg-white p-2 text-s " variant="danger" show>            <div class="d-flex align-items-center justify-content-between">                <p class="fw-medium p-0 m-0 text-center">Info Message</p>                <uxf-button type="button" variant="link" outline sm chromeless collapse=".top">
                    <uxf-icon class="text-d">close</uxf-icon>                </uxf-button>            </div>        </div>    </div>    <uxf-appbar slot="appbar">        <uxf-action-bar slot="left">            <uxf-button type="button" variant="link" outline sm chromeless collapse=".top">
                <uxf-icon class="text-white">close</uxf-icon>            </uxf-button>            <uxf-button variant="light" cta-link outline>                <uxf-icon>cloud</uxf-icon>                left            </uxf-button>            <uxf-button variant="light" outline>item</uxf-button>            <uxf-button variant="light" outline>left</uxf-button>        </uxf-action-bar>        <div class="text-center text-uppercase">            Headless Accelerator        </div>        <uxf-action-bar slot="right" align-right>            <uxf-button variant="primary">right</uxf-button>            <uxf-button variant="dark">login                <uxf-icon class="text-info">person</uxf-icon>            </uxf-button>            <uxf-button variant="primary">right</uxf-button>        </uxf-action-bar>    </uxf-appbar>    <nav slot="navigation" class="text-white nav d-flex justify-content-between">        <a class="p-2 link-light" href="#">Accelerator online</a>        <a class="p-2 link-light" href="#">Catalog</a>        <a class="p-2 link-light" href="#">Buy again</a>
        <a class="p-2 link-light" href="#">Shopper toolkit</a>        <a class="p-2 link-light" href="#">Gift cards</a>        <a class="p-2 link-light" href="#">Drugstore & Bodycare</a>
        <a class="p-2 link-light" href="#">Sports & Outdoors</a>        <a class="p-2 link-light" href="#">Home Improvement</a>
    </nav></uxf-nav>


Supported content#

Navbars come with built-in support for a handful of sub-components.


<uxf-nav style="position: relative;">    <nav slot="navigation" class="navbar">        <a class="nav-link" aria-current="page" href="#">            <uxf-icon>home</uxf-icon>        </a>        <uxf-button  variant="light">Navbar</uxf-button>        <uxf-button type="button"  variant="link">Link</uxf-button>        <uxf-dropdown id="dropdownSimple"  label="Dropdown" variant="secondary">            <uxf-dropdown-item-header>Dropdown header</uxf-dropdown-item-header>            <uxf-dropdown-item><a href="http://google.com/">Go to Google</a></uxf-dropdown-item>            <uxf-dropdown-item><a href="http://redhat.com/" class="disabled">Go to RedHat</a></uxf-dropdown-item>            <uxf-dropdown-item><a href="http://microsoft.com/" class="active">Go to Microsoft</a></uxf-dropdown-item>            <uxf-dropdown-item-divider></uxf-dropdown-item-divider>            <uxf-dropdown-item><a href="#">No Link #</a></uxf-dropdown-item>            <uxf-dropdown-item><a>No Href</a></uxf-dropdown-item>            <uxf-dropdown-item>                <button>With text</button>            </uxf-dropdown-item>            <uxf-dropdown-item>                <button>With <b><i>html</i></b> children</button>            </uxf-dropdown-item>        </uxf-dropdown>        <uxf-button variant="light" disabled >Disabled</uxf-button>        <form>            <input type="search" placeholder="Search" aria-label="Search"></input>            <button>Search</button>        </form>    </nav></uxf-nav>


Text#


<uxf-nav style="position: relative;">    <nav slot="navigation" class="navbar navbar-light bg-light">        <a href="#">NavBar</a>    </nav></uxf-nav>****


Image#


<uxf-nav style="position: relative;">    <nav slot="navigation" class="navbar">        <a class="nav-link" aria-current="page" href="#">            <uxf-icon>home</uxf-icon></a>    </nav></uxf-nav>


Image and text#


<uxf-nav style="position: relative;">    <nav slot="navigation" class="navbar">        <a class="nav-link" aria-current="page" href="#">            <uxf-icon>home</uxf-icon></a>        <a href="#">Home</a>    </nav></uxf-nav>


Nav#


<uxf-nav style="position: relative;">    <nav slot="navigation" class="text-white nav d-flex justify-content-between">        <a class="p-2 link-light" href="#">Accelerator online</a>        <a class="p-2 link-light" href="#">Catalog</a>        <a class="p-2 link-light" href="#">Buy again</a>        <a class="p-2 link-light" href="#">Shopper toolkit</a>        <a class="p-2 link-light" href="#">Gift cards</a>        <a class="p-2 link-light" href="#">Drugstore & Bodycare</a>        <a class="p-2 link-light" href="#">Sports & Outdoors</a>        <a class="p-2 link-light" href="#">Home Improvement</a>    </nav></uxf-nav>


Appbar#

cloudleftleft

title

rightloginpersonright
arrow_backBack

app title

shopping_bagmore_vert

<uxf-appbar>    <uxf-action-bar slot="left">        <uxf-button variant="primary" outline>            <uxf-icon>cloud</uxf-icon>            left        </uxf-button>        <uxf-button variant="primary" outline>left</uxf-button>    </uxf-action-bar>
    <h4 class="fw-lighter text-center text-uppercase">title</h4>    <uxf-action-bar slot="right" align-right>        <uxf-button variant="primary" outline>right</uxf-button>        <uxf-button variant="dark">login            <uxf-icon class="text-info">person</uxf-icon>        </uxf-button>        <uxf-button variant="primary" outline>right</uxf-button>    </uxf-action-bar></uxf-appbar><hr/><uxf-appbar>    <uxf-action-bar slot="left">        <uxf-button variant="primary" chromeless outline>            <uxf-icon>arrow_back</uxf-icon>            Back        </uxf-button>    </uxf-action-bar>
    <h4 class="fw-lighter text-center text-uppercase">app title</h4>    <uxf-action-bar slot="right" align-right>        <uxf-button variant="primary" outline chromeless>            <uxf-icon>shopping_bag</uxf-icon>        </uxf-button>        <uxf-button variant="primary" chromeless outline>            <uxf-icon>more_vert</uxf-icon>        </uxf-button>    </uxf-action-bar></uxf-appbar>