Bottom Navigation

With Labels

Loading...

<flint-bottom-navigation-action>

Bottom Navigation Action: Individual navigation item.

• Tag: <flint-bottom-navigation-action>
• Class: FlintBottomNavigationAction

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintBottomNavigationAction } from 'flint-ui';

Usage

<flint-bottom-navigation-action></flint-bottom-navigation-action>

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Label text for the action.
value	value	unknown	—	Unique value for this action.
active	active	boolean	false	If true, this action is currently selected. (Internal property managed by parent)
showLabel	show-label	boolean	true	Controls label visibility. (Internal property managed by parent)

Slots

Name	Description
(default)	Default slot for content
icon

CSS Custom Properties

Property	Default
--flint-text-color-muted	—
--flint-hover-color	—
--flint-primary-color	—
--flint-font-family	—
--flint-surface-1	—
--flint-shadow-lg	—

---

<flint-bottom-navigation>

Bottom Navigation bars allow movement between primary destinations in an app.

• Tag: <flint-bottom-navigation>
• Class: FlintBottomNavigation

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintBottomNavigation } from 'flint-ui';

Usage

<flint-bottom-navigation></flint-bottom-navigation>

Properties

Property	Attribute	Type	Default	Description
value	value	unknown	—	The value of the currently selected action.
showLabels	show-labels	boolean	false	If true, all labels are shown at all times.

Events

Event	Detail	Description
flint-bottom-navigation-change	—	Dispatched when the selected value changes.

Slots

Name	Description
(default)	destinations (flint-bottom-navigation-action).

---