Menu with more
‹ BackA 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>