Rail
- Recommended for medium to large screens.
- Ideal for horizontal screen layouts.
- Should be fixed to the left or right of the viewport.
- Supports 3-7 tiles.
Expanded Mode
Apply the expanded
property to enable expanded mode. Each tile will resize and used the expanded label.
Menu
(Content)
Bar
- Recommended for small screens.
- Ideal for vertical screen layouts.
- Should be fixed to the bottom of the viewport.
- Supports 3-5 tiles.
- Consider progressive enhancement with the Virtual Keyboard API.
(Content)
Tiles
Tiles are universal between Rails and Bars. They default to buttons, but will convert to anchors when an href
is provided. When implementing value
for selection, each item will reflect the active state automatically. If you wish to set this state manually, use the selected
property.
API Reference
NavCommon
Property | Type | Description |
---|---|---|
value | string | |
base | string | |
background | string | |
padding | string | |
width | string | |
widthExpanded | string | |
height | string | |
classes | string | |
tilesBase | string | |
tilesFlexDirection | string | |
tilesJustify | string | |
tilesItems | string | |
tilesGap | string | |
tilesClasses | string | |
onChange | (id: string) => void | |
NavBar
Property | Type | Description |
---|---|---|
children | ReactNode | |
value | string | |
base | string | |
background | string | |
padding | string | |
width | string | |
widthExpanded | string | |
height | string | |
classes | string | |
tilesBase | string | |
tilesFlexDirection | string | |
tilesJustify | string | |
tilesItems | string | |
tilesGap | string | |
tilesClasses | string | |
onChange | (id: string) => void | |
NavRail
Property | Type | Description |
---|---|---|
expanded | boolean | |
headerBase | string | |
headerFlexDirection | string | |
headerJustify | string | |
headerItems | string | |
headerGap | string | |
headerClasses | string | |
footerBase | string | |
footerFlexDirection | string | |
footerJustify | string | |
footerItems | string | |
footerGap | string | |
footerClasses | string | |
header | ReactNode | |
children | ReactNode | |
footer | ReactNode | |
value | string | |
base | string | |
background | string | |
padding | string | |
width | string | |
widthExpanded | string | |
height | string | |
classes | string | |
tilesBase | string | |
tilesFlexDirection | string | |
tilesJustify | string | |
tilesItems | string | |
tilesGap | string | |
tilesClasses | string | |
onChange | (id: string) => void | |
NavTile
Property | Type | Description |
---|---|---|
id | string | |
href | string | |
target | string | |
label | string | |
labelExpanded | string | |
title | string | |
selected | boolean | |
type | "button" | "submit" | "reset" | |
base | string | |
width | string | |
aspect | string | |
background | string | |
hover | string | |
active | string | |
padding | string | |
gap | string | |
rounded | string | |
classes | string | |
expandedPadding | string | |
expandedGap | string | |
expandedClasses | string | |
labelBase | string | |
labelClasses | string | |
labelExpandedBase | string | |
labelExpandedClasses | string | |
onClick | (id: string) => void | |
children | ReactNode | |