PhiaUi.Components.BottomNavigation (phia_ui v0.1.17)

Copy Markdown View Source

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"}
  ]}
/>

Summary

Functions

bottom_navigation(assigns)

Renders a fixed bottom navigation bar.

Functions

bottom_navigation(assigns)

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.