Bottom Nav
FreeA fixed bottom navigation bar for mobile interfaces, providing persistent access to 3–5 top-level destinations. Each item consists of an icon and a short text label. The active item is visually highlighted with brand colour. Appears only on small viewports and replaces the sidebar or header nav pattern on mobile.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| 3-item | ||
| 4-item | ||
| 5-item |
Usage Guidelines
Limit to 3–5 destinations — more than 5 items cause crowding.
Show bottom nav on desktop — it is a mobile-only pattern.
Always pair icons with text labels for clarity.
Use more than 5 items — prioritise ruthlessly.
Highlight the active destination with brand colour on both icon and label.
Use bottom nav for actions like "Create" or "Share" — it is for navigation only.
Use <nav aria-label="Main"> to identify the bottom bar as the primary navigation on mobile.
Remove text labels — icon-only bottom nav is significantly less usable.
Code
<nav class="lex-bottom-nav" aria-label="Main">
<a href="/home" class="lex-bottom-nav__item lex-bottom-nav__item--active"
aria-current="page">
....lex-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
...// Using Lexicon CSS classes with React
<BottomNav>
<BottomNavItem href="/home" icon={<HomeIcon />} label="Home" active />
...Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-bottom-nav-height | — | — | height |
| --lex-bottom-nav-bg | — | — | bg |
| --lex-bottom-nav-border | — | — | border |
| --lex-bottom-nav-icon-size | — | — | size |
Accessibility
- Use <nav aria-label="Main"> as the primary navigation landmark on mobile.
- Active item uses aria-current="page" to indicate the current destination.
- Badge counts must be announced via aria-label — e.g., aria-label="Inbox, 3 unread".
- Touch targets must be at least 48x48px to meet mobile accessibility guidelines.
- Ensure safe area insets are respected on devices with home indicators.