Description

Demonstrates folding and folded sf-navbar.

Back to Components#sf-navbar.

Automatic Folding

sf-navbar can automatically fold on narrow displays, grouping extra elements into a sliding dropdown. The media breakpoint is configurable.

To enable folding, add a <div class="sf-navbar-toggle">...</div> between the elements where you want the navbar to fold. Resize your viewport to see the folding in effect.

<div class="sf-navbar">
  <a href="/">Home</a>
  <a class="active" href="/robots">Robots</a>
  <a href="/medical-cybernetics">Medical Cybernetics</a>
  <div class="sf-navbar-toggle"></div>
  <a href="/partners">Partners</a>
  <a href="/achievements">Achievements</a>
</div>

Static Folding

With a folding navbar, use the fold option to tell it to always fold, regardless of the viewport width.

<div class="sf-navbar sf-navbar-fold theme-primary">
  <a href="/">Home</a>
  <a class="active" href="/robots">Robots</a>
  <a href="/medical-cybernetics">Medical Cybernetics</a>
  <div class="sf-navbar-toggle"></div>
  <a href="/partners">Partners</a>
  <a href="/achievements">Achievements</a>
</div>