Navbar

Turns an HTML <nav> into a bar supporting collapsible menus. The navbar has the ability to automatically collapse when screen size is reduced without the use of JavaScript.

Structure

• <nav class="bar">
  • <a href="…"> … </a>: Optional link in the navbar.
  • <input class="toggle" type="checkbox" id="nav-toggle" role="button" />: Optional; makes the navbar collapsible.
  • <ul class="menu"> … </a>: Optional menu in the navbar.
  • <label for="nav-toggle">☰</label>: Optional label for manually expanding the navbar when collapsed.

Examples

<nav class="bar layout-flex">
  <a class="lay-fitted" href="">Home</a>
  <input class="toggle" type="checkbox" id="nav-toggle" role="button" />
  <ul class="menu">
    <li class="active"><a class="disabled" href="">Acme</a></li>
    <li><a href="present/">
      <span class="fas fa-file-alt"></span>&#xA0;Documentation</a></li>
    <li><a href="quick-start">
      <span class="fas fa-bolt"></span>&#xA0;Quick Start</a></li>
  </ul>
  <label for="nav-toggle" class="toggle lay-fitted">☰</label>
</nav>

Properties

--skelt-navbar-background-color

Defaults to --skelt-component-background-color.

--skelt-navbar-border-color

Defaults to --skelt-component-border-color.

--skelt-navbar-color

Defaults to --skelt-component-border-color.

--skelt-highlight-background-color

Defaults to --skelt-menu-highlight-background-color.

--skelt-highlight-color

Defaults to --skelt-menu-highlightcolor.

--skelt-navbar-font-family

Defaults to --skelt-menu-font-family.

--skelt-navbar-line-height

Defaults to --skelt-menu-line-height.