Components Tabs

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Tabs

Tabs are used to quickly navigate between views within the same context.
Basic tabs
heex 
          <.tabs>
  <.tab is_active to="/">Home</.tab>
  <.tab link_type="a" to="/" label="About" />
</.tabs>
Tabs with underline
heex 
          <.tabs>
  <.tab underline is_active to="/">Home</.tab>
  <.tab underline link_type="a" to="/" label="About" />
</.tabs>
Log in to view
Basic tabs with number
heex 
          <.tabs>
  <.tab number={1} is_active to="/">Home</.tab>
  <.tab number={63} link_type="a" to="/" label="About" />
</.tabs>
Log in to view
Tabs underlined with number
heex 
          <.tabs underline>
  <.tab underline number={1} is_active to="/">Home</.tab>
  <.tab number={63} underline link_type="a" to="/" label="About" />
</.tabs>
Log in to view
Basic tabs with icons
heex 
          <.tabs>
  <.tab is_active to="/">
    <.icon name="hero-home-solid" class="w-5 h-5 mr-2" /> Home
  </.tab>
  <.tab link_type="a" to="/">
    <.icon name="hero-building-office-solid" class="w-5 h-5 mr-2" /> Company
  </.tab>
</.tabs>
Log in to view
Tabs underlined with outline icons
heex 
          <.tabs underline>
  <.tab underline is_active to="/">
    <.icon name="hero-home" class="w-5 h-5 mr-2" /> Home
  </.tab>
  <.tab underline link_type="a" to="/">
    <.icon name="hero-building-office" class="w-5 h-5 mr-2" /> Company
  </.tab>
</.tabs>
Log in to view
Properties
elixir 
          # <.tabs>
attr(:underline, :boolean, default: false, doc: "underlines your tabs")
attr(:class, :string, default: "", doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)


# <.tab>
attr(:class, :string, default: "", doc: "CSS class")
attr(:label, :string, default: nil, doc: "labels your tab")

attr(:link_type, :string,
  default: "a",
  values: ["a", "live_patch", "live_redirect"]
)

attr(:to, :string, default: nil, doc: "link path")
attr(:number, :integer, default: nil, doc: "indicates a number next to your tab")
attr(:underline, :boolean, default: false, doc: "underlines your your tab")
attr(:is_active, :boolean, default: false, doc: "indicates the current tab")
attr(:rest, :global, include: ~w(method download hreflang ping referrerpolicy rel target type))
slot(:inner_block, required: false)