Bottom Navigation

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

Basic

<me-bottom-navigation value="recents"> <me-bottom-nav-action value="recents" label="Recents"> <svg slot="icon" ...>...</svg> </me-bottom-nav-action> <me-bottom-nav-action value="favorites" label="Favorites"> <svg slot="icon" ...>...</svg> </me-bottom-nav-action> <me-bottom-nav-action value="nearby" label="Nearby"> <svg slot="icon" ...>...</svg> </me-bottom-nav-action> </me-bottom-navigation>

Show Labels

With Disabled Action

API — Bottom Navigation

Attribute / Property	Type	Default	Description
`value`	string	—	Value of the currently selected action.
`show-labels`	boolean	false	Show labels on all actions, not just the selected one.

API — Bottom Nav Action

Attribute	Type	Default	Description
`value`	string	—	Value passed to the parent on selection.
`label`	string	—	Text label displayed below the icon.
`disabled`	boolean	false	Disables the action.
`selected`	boolean	false	Whether this action is currently selected (managed by parent).

Slots — Bottom Nav Action

Slot	Description
`icon`	Icon element displayed above the label.

Events

Event	Detail	Description
`me-change`	`{ value }`	Fired on the Bottom Navigation when the selected action changes.