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)