View on GitLab

Navbar

options

The essential parameter for x-larastrap::navbar is options : an associative array with items to be placed within the navbar itself. In this array, keys are the labels for the menu and values are the related URLs to be linked. 

<x-larastrap::navbar :options="[
    'Home' => '/',
    'Getting Started' => '/docs/getting-started',
    'Base Element' => '/docs/components/element',
]" />

<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-44a585c017dbc508210564a05bc72494">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/getting-started">Getting Started</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Each value in the options can be an associative array itself, holding a few attributes to better describe each item. Among them:

  • url - the URL linked by the item; alternative to route
  • route - the name of the route linked by the item; alternative to url
  • active - to enforce the given item to be marked as active
  • attributes - an associative array with arbitrary HTML attributes to be assigned to the item
  • children - for addictional sub-items, see the dedicated paragraph for details
<x-larastrap::navbar :options="[
    'Home' => ['url' => '/'],
    'Getting Started' => ['route' => 'docs.getting-started', 'active' => true],
    'Base Element' => ['url' => '/docs/components/element', 'attributes' => ['data-bs-toggle' => 'tooltip', 'data-bs-title' => 'Sample tooltip']],
]" />

<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-c4bbdfb01580994c4acba7b61902137a">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="https://larastrap.madbob.org/docs/getting-started">Getting Started</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element" data-bs-toggle="tooltip" data-bs-title="Sample tooltip">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

The active is optional: if Larastrap identifies the current path (or route) as the target for an item in the navbar, it automatically set it in the active state. 


<x-larastrap::navbar :options="[
    'Home' => '/',
    'Navbar' => '/docs/components/navbar',
    'Base Element' => '/docs/components/element',
]" />

<br>

<x-larastrap::navbar :options="[
    'Home' => ['route' => 'homepage'],
    'Navbar' => ['route' => 'docs.navbar'],
    'Base Element' => ['route' => 'docs.element'],
]" />

<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-0f70dbf65409de88c3a5b5d021e2ad0a">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/docs/components/navbar">Navbar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav><br>
<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-0ca4666c75d42f6f8008455f733dc451">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="https://larastrap.madbob.org">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="https://larastrap.madbob.org/docs/components/navbar">Navbar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://larastrap.madbob.org/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

It is available also a end_options parameter, with the same contents of options but able to align at the end of the navbar more items. 

<x-larastrap::navbar :options="[
    'Home' => ['route' => 'homepage'],
    'Getting Started' => ['route' => 'docs.getting-started'],
]" :end_options="[
    'Modals' => route('docs.modal'),
    'Tabs' => route('docs.tabs'),
]" />

<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-b1028cf1b90222a91337bf712c448860">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="https://larastrap.madbob.org">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://larastrap.madbob.org/docs/getting-started">Getting Started</a>
        </li>
      </ul>
      <ul class="navbar-nav position-absolute end-0">
        <li class="nav-item">
          <a class="nav-link" href="https://larastrap.madbob.org/docs/containers/modal">Modals</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://larastrap.madbob.org/docs/containers/tabs">Tabs</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

collapse

A core function of native Bootstrap's navbar is his "responsive behavior", able to reshape the whole menu to be nicely accessible on mobile. By default, Larastrap's navbar collapses the navbar at lg breakpoint, but it is possible to specify the preferred one (or do not collapse it at all, using the value never ).

Resize this page to see the different behaviors with different values for the collapse parameter. 





<x-larastrap::navbar collapse="never" :options="[
    'Home' => '/',
    'Navbar' => '/docs/components/navbar',
    'Base Element' => '/docs/components/element',
]" />

<br>

<x-larastrap::navbar collapse="md" :options="[
    'Home' => '/',
    'Navbar' => '/docs/components/navbar',
    'Base Element' => '/docs/components/element',
]" />

<br>

<x-larastrap::navbar collapse="lg" :options="[
    'Home' => '/',
    'Navbar' => '/docs/components/navbar',
    'Base Element' => '/docs/components/element',
]" />

<br>

<x-larastrap::navbar collapse="xl" :options="[
    'Home' => '/',
    'Navbar' => '/docs/components/navbar',
    'Base Element' => '/docs/components/element',
]" />

<br>

<x-larastrap::navbar collapse="xxl" :options="[
    'Home' => '/',
    'Navbar' => '/docs/components/navbar',
    'Base Element' => '/docs/components/element',
]" />

<nav class="navbar navbar-light bg-light navbar-expand">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-73f310ddb161be233cc45d20c0172154">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/docs/components/navbar">Navbar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav><br>
<nav class="navbar navbar-light bg-light navbar-expand-md">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-2362321d7d957b00b98e55dbb3f2f02a">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/docs/components/navbar">Navbar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav><br>
<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-2dad19fc157711649ab59d547ad53c46">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/docs/components/navbar">Navbar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav><br>
<nav class="navbar navbar-light bg-light navbar-expand-xl">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-3ce8b13c8b4a30f7b725fb15e1f871e0">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/docs/components/navbar">Navbar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav><br>
<nav class="navbar navbar-light bg-light navbar-expand-xxl">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-1a34a9d7581668fe302766603379220b">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/docs/components/navbar">Navbar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

title

A x-larastrap::navbar may also have a title, and a related link associated. 

<x-larastrap::navbar title="My Website" :title_link="route('homepage')" :options="[
    'First' => '/',
    'Second' => '/docs/components/navbar',
    'Third' => '/docs/getting-started',
]" />

<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="https://larastrap.madbob.org">My Website</a>
    <div class="collapse navbar-collapse position-relative" id="navbar-4a35ae6cd7124d1a94a603250153af21">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">First</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/docs/components/navbar">Second</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/getting-started">Third</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

color

The color parameter is a shortcut to add navbar-light or navbar-dark classes to the navbar; remember you can always use the classes base parameter to use all CSS classes you want. 


<x-larastrap::navbar color="light" :options="[
    'Home' => '/',
    'Getting Started' => '/docs/getting-started',
    'Base Element' => '/docs/components/element',
]" />

<br>

<x-larastrap::navbar color="dark" :options="[
    'Home' => '/',
    'Getting Started' => '/docs/getting-started',
    'Base Element' => '/docs/components/element',
]" />

<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-5a19ada9847aab209a7dc144b5abbf0b">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/getting-started">Getting Started</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav><br>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-4e1dc50e6bfcf312cc2d0148872e909d">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/getting-started">Getting Started</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

container

The default wrapping element of a x-larastrap::navbar is Bootstrap's .container-fluid , which expands the bar across the whole screen width, but you may want to just use .container to shrink his width.

In this case, use the container parameter. 

<x-larastrap::navbar container="normal" :options="[
    'Home' => '/',
    'Getting Started' => '/docs/getting-started',
    'Base Element' => '/docs/components/element',
]" />

<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container">
    <div class="collapse navbar-collapse position-relative" id="navbar-6256cac9ad2d9249295eeed74e618162">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/getting-started">Getting Started</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/components/element">Base Element</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Sub Menus

It is possible to define sub-menus using a children index in each option. It must be an associative array, following the same rules of options . 

<x-larastrap::navbar :options="[
    'First' => ['route' => 'homepage'],
    'Second' => ['route' => 'docs.navbar'],
    'More' => ['children' => [
        'Forms' => ['route' => 'docs.forms'],
        'Modals' => ['route' => 'docs.modal'],
    ]]
]" />

<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-2b80d7ed99589983079b0ff5a0e8df11">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="https://larastrap.madbob.org">First</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="https://larastrap.madbob.org/docs/components/navbar">Second</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">More</a>
          <ul class="dropdown-menu">
            <li>
              <a class="dropdown-item" href="https://larastrap.madbob.org/docs/forms/overview">Forms</a>
            </li>
            <li>
              <a class="dropdown-item" href="https://larastrap.madbob.org/docs/containers/modal">Modals</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>