Navbar

How it works

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.

Basic example

Click the accordions below to expand/collapse the accordion content.

<x-navbar id="BasicExample" expand="lg">
    <x-navbar.brand src="static/brand/logo-inverted.svg">Navbar</x-navbar.brand>
    <x-navbar.toggler />
    <x-navbar.collapse>
        <x-navbar.nav>
            <x-nav.li to="/docs/components/navbar">Active</x-nav.li>
            <x-nav.li to="#">Link One</x-nav.li>
            <x-nav.li to="#">Link Two</x-nav.li>
            <x-nav.li to="#" disabled>Disabled</x-nav.li>
        </x-navbar.nav>
    </x-navbar.collapse>
</x-navbar>

<div class="container">
  <a class="navbar-brand"
       href="/">Navbar</a>
  <div class="navbar-collapse collapse"
       id="navbarBasicExample">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="https://demo.laraloop.com/docs/components/navbar"
            class="nav-link">Active</a>
      </li>

      <li class="nav-item">
        <a href="https://demo.laraloop.com/#"
            class="nav-link">Link One</a>
      </li>

      <li class="nav-item">
        <a href="https://demo.laraloop.com/#"
            class="nav-link">Link Two</a>
      </li>

      <li class="nav-item">
        <a href="https://demo.laraloop.com/#"
            class="disabled nav-link">Disabled</a>
      </li>
    </ul>
  </div>
</div>

x-navbar.nav component use x-nav.li which use x-link component, so active class will be automatically set by link component.

Colored example

Click the accordions below to expand/collapse the accordion content.

<x-navbar id="ColorExample" expand="lg" dark color="primary">
    <x-navbar.brand>Navbar</x-navbar.brand>
    <x-navbar.toggler />
    <x-navbar.collapse>
        <x-navbar.nav>
            <x-nav.li to="/docs/components/navbar">Active</x-nav.li>
            <x-nav.li to="#">Link One</x-nav.li>
            <x-nav.li to="#">Link Two</x-nav.li>
            <x-nav.li to="#" disabled>Disabled</x-nav.li>
        </x-navbar.nav>
    </x-navbar.collapse>
</x-navbar>

<div class="container">
  <a class="navbar-brand"
       href="/">Navbar</a>
  <div class="navbar-collapse collapse"
       id="navbarColorExample">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="https://demo.laraloop.com/docs/components/navbar"
            class="nav-link">Active</a>
      </li>

      <li class="nav-item">
        <a href="https://demo.laraloop.com/#"
            class="nav-link">Link One</a>
      </li>

      <li class="nav-item">
        <a href="https://demo.laraloop.com/#"
            class="nav-link">Link Two</a>
      </li>

      <li class="nav-item">
        <a href="https://demo.laraloop.com/#"
            class="disabled nav-link">Disabled</a>
      </li>
    </ul>
  </div>
</div>