Tabs

A row or column of tabs — restyled links. Tertiary at rest; the selected tab is primary with a solid underline.

Prop	Type	Default	Notes
`direction`	String	`"horizontal"`	One of DIRECTIONS: "horizontal" (default, 14px-gap row) or "vertical" (2px-gap, left-aligned column).
`**html_options`	Hash	—	Extra HTML attributes for the `<div class="tabs">`.

Slots: tabs

Horizontal

Overview Activity Settings

<%= render TabsComponent.new do |t| %>
  <% t.with_tab(label: "Overview", href: "#", selected: true) %>
  <% t.with_tab(label: "Activity", href: "#") %>
  <% t.with_tab(label: "Settings", href: "#") %>
<% end %>

Vertical

Overview Activity Settings

<%= render TabsComponent.new(direction: "vertical") do |t| %>
  <% t.with_tab(label: "Overview", href: "#", selected: true) %>
  <% t.with_tab(label: "Activity", href: "#") %>
  <% t.with_tab(label: "Settings", href: "#") %>
<% end %>

1	<%= render TabsComponent.new do \|t\| %>
2	<% t.with_tab(label: "Overview", href: "#", selected: true) %>
3	<% t.with_tab(label: "Activity", href: "#") %>
4	<% t.with_tab(label: "Settings", href: "#") %>
5	<% end %>

1	<%= render TabsComponent.new(direction: "vertical") do \|t\| %>
2	<% t.with_tab(label: "Overview", href: "#", selected: true) %>
3	<% t.with_tab(label: "Activity", href: "#") %>
4	<% t.with_tab(label: "Settings", href: "#") %>
5	<% end %>