# Bottom Navigation A bar of top-level destinations along the bottom of the screen, each an icon over a short label, with the current one highlighted. It is the primary navigation pattern on phones, where the bottom edge is the easiest place to reach. Part of the Harmonia Alpine.js component library. Every directive uses the `x-h-` prefix. ## Usage Use a bottom navigation for the three to five most important destinations of an application, and keep the set the same on every screen. Each destination is a place to go, not an action to perform. When there is a need for more destinations than there can fit comfortably, or with a nested hierarchy, reach for a Sidebar or a Navigation Menu. Give the bar an expression naming the value that holds the current destination, and give each item its own value. The component compares the two, marks the matching item as current and writes the item's value back when it is tapped, so a single variable drives both the highlight and the navigation. Destinations are anchors or buttons. Use an `` with an `href` when each destination is a real URL, and a `
    • ``` ### Floating `data-floating="true"` makes the bar a detached card. In normal flow it takes no spacing of its own, so the margin here comes from the demo wrapper. ```html ``` ### Floating and docked A floating bar sets no position of its own, so combine it with `data-position` and your own offset. ```html
    ``` ### Switching content The bar's expression is an ordinary Alpine value, so the same variable that drives the highlight can drive what the screen shows. ```html
    ``` ### With a badge A destination anchors a Badge indicator, so an unread count or a dot can sit on its icon. ```html ``` Wrapping the icon in a `relative` span anchors the indicator to the icon rather than to the whole destination. Leave the wrapper out and the badge sits in the corner of the tap target instead. ### Icon only `data-labels="false"` hides the labels. The labels stay in the markup, so each destination keeps an accessible name without an extra attribute, but naming them explicitly is clearer. ```html ``` ### Links Use anchors when each destination is a real URL. The current one is still marked from the bar's value, so a server-rendered page can set that value once and the bar highlights the right destination. ```html     ``` ### Docked to the bottom `data-position="sticky"` keeps the bar at the bottom as the content scrolls past it. Scroll to the end and the last row appears above the bar rather than under it. ```html
    ``` ### Hides on scroll `data-hide-on-scroll` slides the bar out of view while the content scrolls down and brings it back on the first scroll up. Point it at the element that scrolls with a template ref, or use `true` to follow the page instead. ```html
    ``` ### Alongside a floating action button A bottom navigation carries the destinations and a Floating Action Button carries the primary action, so the two often appear together. Offset the button so it clears the bar. ```html
    ``` ### Driving the active state yourself Leave the expressions out and the nav will not change the state. Set `data-active` on the item you want highlighted. ```html ``` Full docs: https://www.codbex.com/harmonia/components/bottom-nav.html ## Notes - Directive values are Alpine expressions, so quote string literals: `x-h-...="'Label'"`. - Components render only after Alpine has registered Harmonia. See SKILL.md for setup.