Bottom Navigation
A fixed bottom bar of icon plus label destinations in mobile style, with support for slotted item elements or a JSON items property.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | — | The active destination value |
labels | boolean | true | When set to "false", shows icons only |
static | boolean | — | Lays the bar inline instead of fixed to the viewport bottom |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/bottom-navigation.js"></script>import "./pura/lib/bottom-navigation.js";