Bottom Navigation Item Component
Represents a single item in a bottom navigation bar.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Indicates whether the navigation item is active. |
Slots
| Name | Description |
|---|---|
icon | Slot for the icon when the item is inactive. |
active-icon | Slot for the icon when the item is active. |
default | The default slot for the item label or content. |
CSS Parts
| Name | Description |
|---|---|
bottom-navigation-item | The main container for the bottom navigation item. |
Check this link to learn how to use CSS parts for Bottom Navigation Item Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-font-family | --tap-sys-font-family | The font family for the navigation item. |
--tap-bottom-navigation-item-color | --tap-sys-color-content-tertiary | The text color when the item is inactive. |
--tap-bottom-navigation-active-color | --tap-sys-color-content-primary | The text color when the item is active. |
--tap-bottom-navigation-item-line-height | --tap-sys-typography-label-xs-height | The line height for the label. |
--tap-bottom-navigation-item-font-size | --tap-sys-typography-label-xs-size | The font size for the label. |
--tap-bottom-navigation-item-font-weight | --tap-sys-typography-label-xs-weight | The font weight for the label. |