Navbar

A top navigation bar with brand, links, and action slots. Default height is 72px (3 line rows). The --compact modifier shrinks to 48px. Below the md breakpoint, the nav collapses into a toggleable panel.

Standard navbar

<nav class="ln-navbar ln-navbar--bordered">
  <div class="ln-navbar__inner">
    <a class="ln-navbar__brand" href="#">Acme</a>
    <div class="ln-navbar__nav">
      <a class="ln-navbar__link" href="#" aria-current="page">Home</a>
      <a class="ln-navbar__link" href="#">Products</a>
      <a class="ln-navbar__link" href="#">About</a>
      <a class="ln-navbar__link" href="#">Contact</a>
    </div>
    <div class="ln-navbar__actions">
      <a class="ln-navbar__link" href="#">Sign in</a>
    </div>
  </div>
</nav>

Responsive navbar with mobile panel

Below the md breakpoint, nav links and actions hide and a toggle button appears. Clicking it reveals the panel with a slide-down transition and backdrop overlay. Add data-ln-navbar-toggle to the button and place mobile links inside __panel. Resize the browser to see the collapse in action.

<nav class="ln-navbar ln-navbar--bordered">
  <div class="ln-navbar__inner">
    <a class="ln-navbar__brand" href="#">Acme</a>
    <div class="ln-navbar__nav">
      <a class="ln-navbar__link" href="#" aria-current="page">Home</a>
      <a class="ln-navbar__link" href="#">Products</a>
      <a class="ln-navbar__link" href="#">About</a>
      <a class="ln-navbar__link" href="#">Contact</a>
    </div>
    <div class="ln-navbar__actions">
      <a class="ln-navbar__link" href="#">Sign in</a>
    </div>
    <button class="ln-navbar__toggle" data-ln-navbar-toggle
            aria-expanded="false" aria-label="Toggle menu">
      ☰
    </button>
  </div>
  <div class="ln-navbar__panel" aria-hidden="true">
    <a class="ln-navbar__link" href="#" aria-current="page">Home</a>
    <a class="ln-navbar__link" href="#">Products</a>
    <a class="ln-navbar__link" href="#">About</a>
    <a class="ln-navbar__link" href="#">Contact</a>
    <a class="ln-navbar__link" href="#">Sign in</a>
  </div>
</nav>

Compact navbar

<nav class="ln-navbar ln-navbar--compact ln-navbar--bordered">
  <div class="ln-navbar__inner">
    <a class="ln-navbar__brand" href="#">Dashboard</a>
    <div class="ln-navbar__nav">
      <a class="ln-navbar__link" href="#" aria-current="page">Overview</a>
      <a class="ln-navbar__link" href="#">Analytics</a>
      <a class="ln-navbar__link" href="#">Settings</a>
    </div>
  </div>
</nav>

Reference

Class	Description	Responsive
`.ln-navbar`	Top navigation bar container	No
`.ln-navbar__inner`	Flex row centred at container-wide width	No
`.ln-navbar__brand`	Brand logo / name link	No
`.ln-navbar__nav`	Primary nav link group	No
`.ln-navbar__item`	Nav list item	No
`.ln-navbar__link`	Navigation link	No
`.ln-navbar__actions`	Right-side action slot	No
`.ln-navbar__toggle`	Mobile menu toggle button	No
`.ln-navbar__panel`	Collapsible mobile nav panel	No
`.ln-navbar--sticky`	Stick to viewport top	No
`.ln-navbar--bordered`	Bottom border separator	No
`.ln-navbar--transparent`	Transparent background until scrolled	No
`.ln-navbar--center`	Centre-align nav links	No
`.ln-navbar--compact`	Reduced height (48px)	No
`.ln-navbar--actions-visible`	Keep actions visible on mobile	No