Bottom navigation

The <velin-bottom-nav> component provides a mobile-first tab bar with safe-area padding. Set current to match data-nav on links. Added in 0.7.5.

Example

Home Search Profile

<velin-bottom-nav current="home">
  <a href="/" data-nav="home" current>Home</a>
  <a href="/search" data-nav="search">Search</a>
</velin-bottom-nav>

Accessibility

Navigation landmark with aria-label on the host.
Current page exposed via aria-current="page" on the active link.
Pair with desktop nav utilities — see responsive layout guide.

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>…</velin-bottom-nav>