Nav

How it works

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use the HTML5 progress element, ensuring you can stack progress bars, animate them, and place text labels over them.

Basic example

Use the border spinners for a lightweight loading indicator.

<x-nav>
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

List example

Use the border spinners for a lightweight loading indicator.

<x-nav.ul>
    <x-nav.li to="/docs">Docs</x-nav.li>
    <x-nav.li to="/docs/components">Components</x-nav.li>
    <x-nav.li to="/docs/components/nav">Nav</x-nav.li>
</x-nav.ul>

<ul class="nav">
  <li class="nav-item">
    <a href="https://demo.laraloop.com/docs"
        aria-current="page"
        class="active nav-link">Docs</a>
  </li>

  <li class="nav-item">
    <a href="https://demo.laraloop.com/docs/components"
        class="nav-link">Components</a>
  </li>

  <li class="nav-item">
    <a href="https://demo.laraloop.com/docs/components/nav"
        class="nav-link">Nav</a>
  </li>
</ul>

Centered aligned example

Use the border spinners for a lightweight loading indicator.

<x-nav centered>
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

End (right) aligned example

Use the border spinners for a lightweight loading indicator.

<x-nav end>
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

Vertical aligned example

Use the border spinners for a lightweight loading indicator.

<x-nav vertical>
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

Vertical from SM breaking example

Use the border spinners for a lightweight loading indicator.

<x-nav vertical="sm">
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

Tabs styled example

Use the border spinners for a lightweight loading indicator.

<x-nav tabs>
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

Pills styled example

Use the border spinners for a lightweight loading indicator.

<x-nav pills>
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

Pills and fill example

Use the border spinners for a lightweight loading indicator.

<x-nav pills fill>
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

Tabs styled example

Use the border spinners for a lightweight loading indicator.

<x-nav tabs>
    <x-nav.link to="/docs">Docs</x-nav.link>
    <x-nav.link to="/docs/components">Components</x-nav.link>
    <x-nav.link to="/docs/components/nav">Nav</x-nav.link>
</x-nav>

<a href="https://demo.laraloop.com/docs"
      aria-current="page"
      class="active nav-link">Docs</a> <a href="https://demo.laraloop.com/docs/components"
      class="nav-link">Components</a> <a href="https://demo.laraloop.com/docs/components/nav"
      class="nav-link">Nav</a>

Tabs styled example

Use the border spinners for a lightweight loading indicator.

<x-nav tabs>
    <x-nav.li to="welcome">Welcome</x-nav.li>
    <x-nav.dropdown id="dropdownNav">
        <x-dropdown.toggle.a class="nav-link">Dropdown</x-dropdown.toggle.a>
        <x-dropdown.menu.ul>
            <x-dropdown.item.li href="/login">Login</x-dropdown.item.li>
            <x-dropdown.item.li href="/register">Register</x-dropdown.item.li>
        </x-dropdown.menu.ul>
    </x-nav.dropdown>
    <x-nav.li to="test">Test</x-nav.li>
</x-nav>

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

  <li class="nav-item dropdown"
      id="dropdownNav">
    <a href="#"
        id="dropdownMenudropdownNav"
        data-bs-toggle="dropdown"
        role="button"
        aria-expanded="false"
        class="dropdown-toggle nav-link"
        name="dropdownMenudropdownNav">Dropdown</a>
  </li>
</ul>

<ul class="dropdown-menu"
    aria-labelledby="dropdownMenudropdownNav">
  <li>
    <a class="dropdown-item"
        href="/login">Login</a>
  </li>

  <li>
    <a class="dropdown-item"
        href="/register">Register</a>
  </li>
</ul>

<ul>
  <li class="nav-item">
    <a href="https://demo.laraloop.com/test"
        class="nav-link">Test</a>
  </li>
</ul>

Tabs styled example

Use the border spinners for a lightweight loading indicator.

First tab content

Second tab content

Third tab content

<x-tab id="my">
    <x-tab.nav>
        <x-tab.link id="first" active>First</x-tab.link>
        <x-tab.link id="second">Second</x-tab.link>
        <x-tab.link id="third">Third</x-tab.link>
    </x-tab.nav>
    <x-tab.content>
        <x-tab.pane id="first" active>First tab content</x-tab.pane>
        <x-tab.pane id="second">Second tab content</x-tab.pane>
        <x-tab.pane id="third">Third tab content</x-tab.pane>
    </x-tab.content>
</x-tab>

<div>
  <button type="button"
       class="nav-link active"
       id="first-tab"
       data-bs-toggle="tab"
       data-bs-target="#first"
       aria-controls="first-tab"
       aria-selected="true"
       role="tab">First</button> <button type="button"
       class="nav-link"
       id="second-tab"
       data-bs-toggle="tab"
       data-bs-target="#second"
       aria-controls="second-tab"
       aria-selected="false"
       role="tab">Second</button> <button type="button"
       class="nav-link"
       id="third-tab"
       data-bs-toggle="tab"
       data-bs-target="#third"
       aria-controls="third-tab"
       aria-selected="false"
       role="tab">Third</button>
  <div class="tab-content"
       id="myTabContent">
    <div id="first"
         role="tabpanel"
         aria-labelledby="first-tab"
         class="tab-pane fade show active">
      First tab content
    </div>

    <div id="second"
         role="tabpanel"
         aria-labelledby="second-tab"
         class="tab-pane fade">
      Second tab content
    </div>

    <div id="third"
         role="tabpanel"
         aria-labelledby="third-tab"
         class="tab-pane fade">
      Third tab content
    </div>
  </div>
</div>