Documentation Playground
Skip to content
Docs

Tab Nav

Navigation menu with links styled as tabs. 
<.tab_nav>
  <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
</.tab_nav>

API Reference

Navigation links styled as tabs. Supports common margin props. Use the as prop on tab_nav_link to render a different element (for example, a LiveView link component).

Root

Contains the navigation menu links.

Prop Type Default Description
class string nil
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
high_contrast boolean — Whether to increase color contrast with the background.
justify string — Justify content. Responsive supported.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
size string "2"
style string nil
wrap string — Flex wrap. Responsive supported.
class
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
justify Justify content. Responsive supported.
Type string Default —
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
size
Type string Default "2"
style
Type string Default nil
wrap Flex wrap. Responsive supported.
Type string Default —

An individual navigation menu link.

Prop Type Default Description
active boolean false
as string "a"
class string nil
href string nil
style string nil
active
Type boolean Default false
as
Type string Default "a"
class
Type string Default nil
href
Type string Default nil
style
Type string Default nil

Examples

Size

Use the size prop to control the size of the tabs.

<.flex direction="column" gap="4">
  <.tab_nav size="1">
    <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
  </.tab_nav>
  <.tab_nav size="2">
    <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
  </.tab_nav>
</.flex>

Color

Use the color prop to assign a specific accent color to the tab list.

<.flex direction="column" gap="4">
  <.tab_nav color="indigo">
    <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
  </.tab_nav>
  <.tab_nav color="cyan">
    <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
  </.tab_nav>
  <.tab_nav color="orange">
    <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
  </.tab_nav>
  <.tab_nav color="crimson">
    <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
  </.tab_nav>
</.flex>

High-contrast

Use the high_contrast prop to increase color contrast with the background.

<.flex direction="column" gap="4">
  <.tab_nav color="gray">
    <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
  </.tab_nav>
  <.tab_nav color="gray" high_contrast>
    <.tab_nav_link href="#" active>Account</.tab_nav_link><.tab_nav_link href="#">Documents</.tab_nav_link><.tab_nav_link href="#">Settings</.tab_nav_link>
  </.tab_nav>
</.flex>
← Switch Table →