Menu with more

‹ Back

A menu that fits responsively and moves any over-flowing links in to a "more" menu.

The library used is called Priority Navigation and has it's own documentation and settings.

Resize your window to see the "more" menu pop in as required.

<div class="navigation">
  <nav aria-label="Global Navigation" class="menu-more">
    <ul class="level-1">
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
      <li><a href="#">Link five</a></li>
      <li><a href="#">Link six</a></li>
      <li><a href="#">Link seven</a></li>
    </ul>
  </nav>
</div>

While it can work with a three-level nested simple-navigation, it's not recommended.

<div class="navigation">
  <nav aria-label="Global Navigation" class="menu-more">
    <%= render_navigation({
      context: :styleguide_sample,
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "more-menu-tree",
      toggles: true,
      temporary_toggles: true,
      icons: true,
    }) %>
  </nav>
</div>