Bottom Navigation 1.2.0

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). English: Bottom Nav

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Design Intelligence (Plan / Review / Agent-Meta) ist separat und, wo angegeben, Beta / Grundlage.

Wann verwenden

Mobile Apps und kompakte Shells mit 3 bis 5 Top-Level-Zielen.
You need aria-current="page" synced from a host current key or per-item current.

Wann nicht verwenden

Nicht als einzige Primaernavigation auf Desktop verwenden: kombiniere sie bei groesseren Breakpoints mit Navbar.
Nicht mit zu vielen Zielen ueberladen; fuer Ueberlauf besser Drawer oder Mehr-Menue verwenden.
Fuer Panelwechsel innerhalb einer Seite verwende Navs & Tabs.

Beispiel

Startseite Suche 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>

Attribut

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

Standard 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.

Barrierefreiheit

Internal role="navigation" with host aria-label.
Current destination exposed via aria-current="page" on the active item.
Native Links/Buttons bleiben in der Tab-Reihenfolge.
Pair with desktop nav — see the responsive layout guide.

Contract status: pass.

Import

Lade das Bundle einmal und nutze dann das Custom Element in deinem Markup:

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