Adaptive Navigation

Horizontal navigation where the visible items change according to the available space. A 'More' button is used to reveal hidden items.

How to

The Adaptive Navigation component can be used for horizontal navigations with a large (or unknown) number of items.

The number of visible items changes based on the horizontal available space. A dropdown button is used to reveal the additional items in the list.

To change the navigation alignment, edit the justify-content utility class applied to the .adapt-nav__list element:

• In the CodyFrame version, remove the .justify-center class to align the navigation content to the left;
• In the CodyFrame version, replace the .justify-center class with .justify-end to align the navigation content to the right.

Categories

• Navigation > Sub Nav

Bug report & feedback

Component Github page ↗