Our navigation component is a collection of pill-shaped buttons that respond gracefully to various window sizes and parent containers.
||N/A||Base parent container for navigation|
||When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap|
||The individual pill-shaped link in a navigation|
||Applies to a navigation item that’s currently selected / active|
Care should be taken to only include a single navigation per page. When navigations end up being nested, it can cause user confusion, and lead to a muddled page composition.
Forcing a navigation to scroll is an established pattern on mobile devices, so it may be appropriate to use it in that context. Wrapping tends to make more sense on larger screens, where the user isn’t forced to scroll passed a ton of navigation chrome.