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://laraloop.com/docs/components/navbar"
            class="nav-link">Active</a>
      </li>

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

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

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

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://laraloop.com/docs/components/navbar"
            class="nav-link">Active</a>
      </li>

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

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

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