Navigation Component
Tip: On desktop, try to switch to mobile view from DevTools settings to observe alternative styles for the component without hover action.
Related Classes
-expandFrom…- All modifier classes that starts with-expandmakes modified navigation component expandable. Available namespaces for this modifier class are:-expandFromBlockStart,-expandFromStartStart-flow…- Changes the flow direction of affected navigation component. Available namespaces:-flowHorizontal,-flowVertical
Preview
Horizontal Tree Nav | -typeTree -flowHorizontal
Recommended for devices that fits inside a palm.
Vertical Flyout Nav | -typeFlyout -flowVertical
Recommended for devices that fits inside a palm or lap.
Horizontal Flyout Nav | -typeFlyout -flowHorizontal -alignStart
Available modifiers: -alignStart, -alignCenter
Recommended for devices that fits a lap or a desk.
Expandable (from top) Horizontal Tree Nav | -typeTree -flowHorizontal -expandFromBlockStart
Recommended for devices that fits inside a palm.
Expandable (from left) Vertical Flyout Nav | -typeFlyout -flowVertical -expandFromStartStart
Tag Navigation | -typeTag -flowHorizontal
Recommended for including SEO tags below a blogpost or secondary action buttons.