BottomNav
Bottom navigation bar.
import { BottomNav } from '@ybouhjira/hyperkit';Static examples
This component depends on app-level context (providers, services, or interactive setup) that does not fit the inline playground yet, so its examples are shown as static code.
#Props
| Prop | Type | Default | Description |
|---|---|---|---|
items * | BottomNavItem[] | — | Array of navigation items (2–5 recommended). |
activeId | string | — | Controlled active item id. If omitted, falls back to activePath matching. |
activePath | string | — | Current route path used for automatic active detection from item.to.
Only used when activeId is not provided. |
onSelect | (id: string) => void | — | Called when a non-disabled item is tapped. |
position | 'top' | 'bottom' | 'bottom' | Position variant.
- 'bottom' — fixed to viewport bottom, 64px height, z-index above content.
- 'top' — positioned at the top of its container (non-fixed). |
hidden | boolean | false | When true, renders nothing. |
'aria-label' | string | 'Navigation' | Accessible label for the <nav> landmark. |
class | string | — | Additional class applied to the root <nav>. |
style | JSX.CSSProperties | — | Inline style merged onto the root <nav>. |
* required prop.
#Design Tokens
This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.
--sk-accent--sk-bg-secondary--sk-border--sk-duration-fast--sk-ease-default--sk-error--sk-font-size-xs--sk-font-weight-semibold--sk-icon-lg--sk-space-2xs--sk-space-md--sk-space-sm--sk-space-xs--sk-text-on-accent--sk-text-secondary--sk-z-sticky