PhoenixKitWeb.Components.Core.NavTabs (phoenix_kit v1.7.106)

Copy Markdown View Source

Universal tab component for PhoenixKit.

Supports two modes with identical visual appearance:

Navigation tabs — each tab has a path, renders as <.link navigate={...}>:

<.nav_tabs active_tab="general" tabs={[
  %{id: "general", label: "General", icon: "hero-cog-6-tooth", path: "/admin/settings"},
  %{id: "advanced", label: "Advanced", path: "/admin/settings/advanced"}
]} />

Event tabs — no paths, uses on_change event via phx-click:

<.nav_tabs active_tab={@active_tab} on_change="switch_tab" tabs={[
  %{id: "oban", label: "Oban Jobs"},
  %{id: "scheduler", label: "Scheduler"}
]} />

With badges (works in both modes):

<.nav_tabs active_tab={@tab} tabs={[
  %{id: "followers", label: "Followers", path: "/connections?tab=followers", badge: @followers_count},
  %{id: "following", label: "Following", path: "/connections?tab=following", badge: @following_count}
]} />

Tab map keys

Required: :id, :label Optional: :icon (Heroicon name), :path (navigation URL), :badge (count/text)

Summary

Functions