# `PhiaUi.Components.BottomNavigation`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/bottom_navigation.ex#L1)

BottomNavigation component — a fixed bottom tab bar for mobile/PWA apps.

Equivalent to the iOS tab bar or Android bottom navigation bar. Renders
a fixed `<nav>` at the bottom of the viewport with icon + label items.
Zero JavaScript — all state is managed server-side via LiveView.

## Examples

    <%!-- With items attr --%>
    <.bottom_navigation
      active={@current_tab}
      items={[
        %{label: "Home",     icon: "home",    href: "/",        value: "home"},
        %{label: "Search",   icon: "search",  href: "/search",  value: "search"},
        %{label: "Messages", icon: "message", href: "/messages", value: "messages", badge_count: @unread},
        %{label: "Profile",  icon: "user",    href: "/profile", value: "profile"}
      ]}
    />

    <%!-- With phx-click (SPA navigation) --%>
    <.bottom_navigation
      active={@tab}
      on_click="switch_tab"
      items={[
        %{label: "Feed",   icon: "home",   value: "feed"},
        %{label: "Search", icon: "search", value: "search"}
      ]}
    />

# `bottom_navigation`

Renders a fixed bottom navigation bar.

Supports both `:items` list and `<:item>` slot APIs. When both are provided,
`:items` takes precedence.

## Examples

    <.bottom_navigation
      active={@tab}
      on_click="set_tab"
      items={[
        %{label: "Home", icon: "home", value: "home"},
        %{label: "Profile", icon: "user", value: "profile"}
      ]}
    />

## Attributes

* `items` (`:list`) - List of navigation item maps. Each map supports:
  - `:label` (string, required) — visible text label
  - `:icon` (string) — icon name (rendered as text; integrate your icon system)
  - `:href` (string) — link target; renders `<a>` when set
  - `:value` (string) — identifier for active comparison and phx-value-value
  - `:badge_count` (integer) — notification badge; omit or 0 to hide
  - `:disabled` (boolean) — disables the item

  Defaults to `[]`.
* `active` (`:string`) - Value of the currently active item. Matching item receives active styling. Defaults to `nil`.
* `on_click` (`:string`) - LiveView event dispatched via phx-click. The item value is sent as phx-value-value. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the <nav> element.
## Slots

* `item` - Alternative slot-based API for navigation items.

---

*Consult [api-reference.md](api-reference.md) for complete listing*