Bottom Navigation

With Labels

Loading...

<flint-bottom-navigation-action>

Bottom Navigation Action: Individual navigation item.

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

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintBottomNavigationAction } from '@getufy/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	showLabel	boolean	true	Controls label visibility. (Internal property managed by parent)

Slots

Name	Description
icon	Icon element.
(default)	Label text.

CSS Parts

Name	Description
icon	The icon container.
label	The label element.

CSS Custom Properties

Property	Default
--flint-text-color-muted	—
--flint-bottom-nav-action-max-width	none
--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 '@getufy/flint-ui'; // auto-registers all
// or
import { FlintBottomNavigation } from '@getufy/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.
defaultValue	default-value	unknown | undefined	—	Initial selected value for uncontrolled usage.
showLabels	show-labels	boolean	false	If true, all labels are shown at all times.

Events

Event	Detail	Description
flint-bottom-navigation-change	{ value: number | string }	Dispatched when the selected value changes. detail: { value: number | string }

Slots

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

CSS Parts

Name	Description
base	The component's base wrapper element.

---