Bottom navigation 1.2.2

The <velin-bottom-nav> component provides a mobile-first tab bar with safe-area padding. Set current to match data-nav on links (or mark a child with the current attribute). Deutsch: Bottom Nav De

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Mobile apps and compact shells with 3–5 top-level destinations.
You need aria-current="page" synced from a host current key or per-item current.

When not

Do not use as the only desktop primary nav — pair with Navbar at larger breakpoints.
Do not overload with many destinations; prefer a drawer or more menu for overflow.
For in-page panel switching, use Navs & Tabs.

Example

Home Search Profile

<velin-bottom-nav current="home" aria-label="Primary">
  <a href="/" data-nav="home">Home</a>
  <a href="/search" data-nav="search">Search</a>
  <a href="/profile" data-nav="profile">Profile</a>
</velin-bottom-nav>

Attributes

Attribute	Default	Notes
`current`	—	Matches child `data-nav` (or `dataset.nav`) to set `aria-current="page"`
`aria-label`	`Bottom navigation`	Name of the internal navigation landmark

Default slot: links or buttons. Children may also carry the boolean current attribute. If a child has no text and no aria-label, the component may infer a label from data-nav / title.

Accessibility

Internal role="navigation" with host aria-label.
Current destination exposed via aria-current="page" on the active item.
Native links/buttons remain in the tab order.
Pair with desktop nav — see the responsive layout guide.

Contract status: pass.

Import

Load the bundle once, then use the custom element in your markup:

<script type="module" src="../../dist/velinstyle-components.min.js"></script>
<velin-bottom-nav current="home">…</velin-bottom-nav>