# `PhoenixKitWeb.Components.Core.NavTabs`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.165/lib/phoenix_kit_web/components/core/nav_tabs.ex#L1)

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)

# `nav_tabs`

## Attributes

* `active_tab` (`:string`) (required)
* `tabs` (`:list`) (required) - List of tab maps with :id, :label, and optional :icon, :path, :badge.
* `on_change` (`:string`) - phx-click event name for event-based tabs (when tabs have no :path). Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.

---

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