Tabs

Tabs organize related content across screens, data sets, and can be used for navigation to related destinations.

React Component

Page level tabs

With icons

With background

Filter style

Sage Component

SageTabs

<h3 class="t-sage-heading-6">Page level tabs</h3>
<div class="sage-tabs-container">
  <%= sage_component SageTabs, {
      navigational: true,
      items: [
        {
          text: "Outline",
          attributes: {
            href: "//example.com/basic-test1",
          },
          active: true
        },
        {
          text: "Customize",
          attributes: {
            href: "//example.com/basic-test2"
          },
        },
        {
          text: "Offers",
          attributes: {
            href: "//example.com/basic-test3"
          },
        },
        {
          text: "Members (300)",
          attributes: {
            href: "//example.com/basic-test3"
          },
        },
        {
          text: "Settings",
          attributes: {
            href: "//example.com/basic-test3"
          },
        },
      ]
    }
  %>

<h3 class="t-sage-heading-6">With icons</h3>
<div class="sage-tabs-container">
  <%= sage_component SageTabs, {
      navigational: true,
      items: [
        {
          text: "Manage Comments",
          attributes: {
            href: "//example.com/basic-test1",
          },
          active: true,
          icon: "comment"
        },
        {
          text: "Sorting",
          attributes: {
            href: "//example.com/basic-test2"
          },
          icon: "filter"
        },
      ]
    }
  %>


<h3 class="t-sage-heading-6">With background</h3>
<div class="sage-tabs-container">
  <%= sage_component SageTabs, {
      id: "nav-tabs-example",
      with_background: true,
      items: [
        {
          text: "Sun",
          attributes: {
            href: "//example.com/basic-test1",
          },
        },
        {
          text: "Mon",
          attributes: {
            href: "//example.com/basic-test2"
          },
          active: true
        },
        {
          text: "Tues",
          attributes: {
            href: "//example.com/basic-test3"
          },
        },
        {
          text: "Wed",
          attributes: {
            href: "//example.com/basic-test2"
          },
        },
        {
          text: "Thurs",
          attributes: {
            href: "//example.com/basic-test2"
          },
        },
        {
          text: "Fri",
          attributes: {
            href: "//example.com/basic-test2"
          },
        },
        {
          text: "Sat",
          attributes: {
            href: "//example.com/basic-test2"
          },
        },
      ]
    }
  %>

<h3 class="t-sage-heading-6">Filter style</h3>
<div class="sage-tabs-container">
  <%= sage_component SageTabs, {
    id: "filter-tabs-example",
    style: "filter",
    items: [
      {
        text: "Current",
        attributes: {
          href: "//example.com/basic-test1",
        },
      },
      {
        text: "Past",
        attributes: {
          href: "//example.com/basic-test2"
        },
        active: true
      },
      {
        text: "All",
        attributes: {
          href: "//example.com/basic-test3"
        },
      },
    ]
  }
%>

Property	Description	Type	Default
`align_items_center`	Whether or not to center the content in each tab.	Boolean	`false`
`gap`	Adjusts the size of the gap between tabs.	[`:xs` \| `:sm` \| `:md` \| `:lg`]	`nil`
`id`	Unique identifier for this tab set.	String	`nil`
`items`	A set of items that render as tabs. Values for each item must conform to the properties available for either Tab or Choice components, depending on the `style` setting used here.	`Array<{ active: Boolean, align_center: Boolean, attributes: Hash, data: Hash, disabled: Boolean, graphic: String, icon: String, link_text: String, subtext: String, target: String, text: String, type: "arrow", "graphic", "icon", "radio" }>`	`nil`
`justify`	Sets the CSS `flex` justification for the tabs.	`"center"` \| `"end"` \| `"space-between"`	`nil` (start)
`navigational`	Whether or not the tab set acts functionally as a navigation set for pages such as in a progressbar fashion.	Boolean	`false`
`progressbar`	Whether or not to display tabs in a Progress bar layoutu with carets separating each.	Boolean	`false`
`stacked`	Whether or not the tab set should be laid out in a stack versus inline (default) fashion.	Boolean	`false`
`style`	What kind of tab style to use. A simple style is default, but the `choice` setting enables a more complex Choice style (See Tab versus Choice components)	`nil` \| `"choice` \| `"filter"`	`nil`
`with_background`	Determines whether to use the modification that has a `background-color`	Boolean	`false`