Skip to main contentSkip to site searchSkip to component search
Honeycomb

Nav Horizontal Overflow

This plugin enables responsive behavior for nav-horizontal component. It collapses menu items that does not fit within the given container into a 'More' sub menu.

Behavior

  • Items that don't fit are hidden and cloned into a flix-nav-horizontal-subnav submenu accessible via the "More" button
  • The "More" button displays a badge with the count of hidden items
  • When the active item (marked with aria-current) is collapsed, the "More" button receives aria-current to show active styling
  • Resizing the container re-evaluates which items fit - items return to the nav when space becomes available
  • The submenu uses the standard dropdown plugin for open/close, keyboard navigation, and accessibility

Dependencies

This plugin requires the Dropdown plugin to be loaded before initialization. The dropdown plugin handles the submenu toggling, keyboard navigation, and accessibility attributes.

Usage

Include dropdown.js and navHorizontalOverflow.js on your page and initialize them:

<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/dropdown.js"></script>
<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/navHorizontalOverflow.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    dropdown.init();
    navHorizontalOverflow.init();
  });
</script>

In bundled environments (e.g. Gatsby, webpack) where globals are not available, pass the dropdown plugin as an option:

import dropdown from '@user/honeycomb/js/dropdown';
import navHorizontalOverflow from '@user/honeycomb/js/navHorizontalOverflow';

dropdown.init();
navHorizontalOverflow.init({ dropdown });

Next, add the data-nav-horizontal-overflow attribute to your flix-nav-horizontal element.

Example bellow illustrates the setup, try resizing the viewport to see the plugin in action:

<nav class="flix-nav-horizontal" data-nav-horizontal-overflow aria-label="In this page">
  <ul class="flix-nav-horizontal__items">
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Tokens</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Components</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Patterns</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Emails</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Icons</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Illustrations</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link" aria-current="page">
        <span class="flix-nav-horizontal__text">Logos</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Flags</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Favicons</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Guides</span>
      </a>
    </li>
    <li class="flix-nav-horizontal__item">
      <a href="#" class="flix-nav-horizontal__link">
        <span class="flix-nav-horizontal__text">Examples</span>
      </a>
    </li>
  </ul>
</nav>

Configuration

Configuration can be set globally via the init(options) call and/or per element via data attributes. Data attributes on individual nav elements override the global options.

OptionData attributeDefaultDescription
dropdown——Reference to the dropdown plugin (required in bundled environments where globals are unavailable)
labeldata-nav-horizontal-overflow-label"More"The visible text on the overflow trigger button
badgeLabeldata-nav-horizontal-overflow-badge-label"{count} hidden items"Screen-reader text for the badge. {count} is replaced with the actual number of hidden items
positiondata-nav-horizontal-overflow-position"left"Submenu alignment relative to the "More" button ("left" or "right")

Global options example

navHorizontalOverflow.init({
  dropdown: dropdown,
  label: 'Mehr',
  badgeLabel: '{count} versteckte Einträge',
  position: 'left',
});

Per-element override example

<nav 
  class="flix-nav-horizontal"
  data-nav-horizontal-overflow
  data-nav-horizontal-overflow-label="Mehr"
  data-nav-horizontal-overflow-badge-label="{count} versteckte Einträge"
  aria-label="Navigation"
>
  <!-- items -->
</nav>