Tabs

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


React Component

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