Navigation
TabBar
Phone navigation along the bottom: four or five destinations, the current one in accent blue with a bold label.
Preview
Props
| Prop | Type | Description |
|---|---|---|
itemsRequired | { key: string; label: string; icon: IconName; href?: string; dot?: boolean }[] | |
value | string | |
label | string | |
floating | boolean | A glass capsule floating over the content (phones), instead of a bar across the bottom. |
end | React.ReactNode | One more tab at the end that isn't a link, such as an AccountMenu with tab. |
endCurrent | boolean | The end tab is the current page (Profile). |
className | string |
Guidelines
Phone navigation along the bottom: four or five destinations, the current one in accent blue with a bold label.
Provide: items ({ key, icon, label, dot, href }) and the current value.
- The same destinations as the desktop SideNav, in the same order.
- This is an addition: Spectrum has no bottom bar, so it follows Spectrum's nav colors and 24px mobile icons.
floatingmakes it a glass capsule inset from the screen edges, with content scrolling beneath, the way iOS floats its tab bar. The app uses it on phones.
- The current tab is the raised selected thumb.
endadds one more tab that isn't a link, at the end of the bar. On phones Makado puts you there: an AccountMenu withtab: 'Profile', your photo above the word, opening your menu upward (Profile, Settings, Theme, Sign out).- One sliding selection. In the floating bar the current tab is a single raised thumb (
selected-fill,selected-shadow) that slides to wherever you go (320ms, still with reduced motion) and fades out on pages that aren't tabs. SetendCurrentwhen theendtab is the current page. Tabs are 60px tall with 12px labels.