The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Tabs

Gitea

Allows users to move among different views within the same context and at the same level of hierarchy.

Tabs allow users to move between different views within the same context at the same level of hierarchy, e.g., UI vs. CLI, macOS vs. Windows vs. Linux, etc.

Usage

When to use

  • To move between different views within the same context.
Do

Use Tabs to break up content that is related to each other and is on the same hierarchical level.

Tab usage example

When not to use

Don’t

Don’t use Tabs for primary or secondary navigation.

Tab usage example

Don’t

Don’t use Tabs for sequential content.

Tab usage example

Tab best practices

Don’t

We don’t recommend using a singular Tab; instead consider using a heading.

Tabs with only one tab

Don’t

Don’t trigger a Tab change via an external action, such as a submit or next button. Tab changes should only be triggered by the Tab itself as that is the expected user interaction.

Tabs with external trigger

Sizes

Medium tabs are the default and work best in most contexts. Large tabs can be used to emphasize important sections, enhance clarity, and convey hierarchical distinction.

Tabs sizes example

Choosing sizes

Mixing different tab sizes is not recommended and can negatively impact the natural page hierarchy. Choose tab sizes intentionally and align them with the hierarchical importance of the information they represent.

We recommend structuring Tabs to reflect the intended hierarchy of the content they contain:

  • Large Tabs sit higher in the page hierarchy and can be used to express more important content, but should be used more sparingly.
  • Medium tabs are more adaptable in most scenarios and naturally occupy the same hierarchy as most page content.

Spacing

Contained

When the content area consists of a contained component (e.g., table, card, etc), we recommend:

  • 24px above tabs
  • 0px between the tabs and the content area
  • Top & right border-radius of the content area be set to 0
  • The content area should be flush on the left & right with the tabs

Tabs contained spacing example

Nested

We don’t recommend using a nested tab structure, but if you must, don’t go beyond 2 levels of nesting. If finding that you need to go beyond 2 levels of nesting, consider using another navigation pattern or re-evaluating the information architecture of your product.

When nesting tabs, regardless of if your content area consists of contained or non-contained components; we recommend:

  • 24px above each Tabs instance
  • 16px between each Tabs instance and its corresponding content area
  • Top & right border-radius of the content area be set to 0, if contained
  • Each content area should be left indented by 16px

Tabs nested spacing example

Not contained

When the content area does not consist of a contained component (ie. text block, form, etc), we recommend:

  • 24px above Tabs
  • 16px between the Tabs and the content area
  • The content area should be flush on the left & right with the Tabs, if only one level of tabs. If nested levels, see "Nested".

Tabs not contained spacing example

Overflow

Tabs will fill 100% of the parent container, unless explicitly set to something else. When there are too many tabs to fit within the TabList, a horizontal scrollbar will help the user navigation hidden tabs.

The Wonderful Wizard of Oz The Bell Jar The Little Prince Alice in Wonderland Lady Windermere’s Fan Dune To Kill a Mockingbird Fahrenheit 451 Handle With Care Oh, the Places You’ll Go! I am No One You Know Twilight of the Idols Song of Myself The Secret History Poems of Arthur O’Shaughnessy “A heart is not judged by how much you love; but by how much you are loved by others” – L. Frank Baum, The Wonderful Wizard of Oz “I took a deep breath and listened to the old brag of my heart. I am, I am, I am.” – Sylvia Plath, The Bell Jar “The most beautiful things in the world cannot be seen or touched, they are felt with the heart.” – Antoine de Saint-Exupéry, The Little Prince “Why, sometimes I’ve believed as many as six impossible things before breakfast.” – Lewis Carroll, Alice in Wonderland “We are all in the gutter, but some of us are looking at the stars.” – Oscar Wilde, Lady Windermere’s Fan “I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.” – Frank Herbert, Dune “Atticus said to Jem one day, “I’d rather you shot at tin cans in the backyard, but I know you’ll go after birds. Shoot all the blue jays you want, if you can hit ‘em, but remember it’s a sin to kill a mockingbird.” That was the only time I ever heard Atticus say it was a sin to do something, and I asked Miss Maudie about it. “Your father’s right,” she said. “Mockingbirds don’t do one thing except make music for us to enjoy. They don’t eat up people’s gardens, don’t nest in corn cribs, they don’t do one thing but sing their hearts out for us. That’s why it’s a sin to kill a mockingbird.” – Harper Lee, To Kill a Mockingbird “Stuff your eyes with wonder, he said, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury, Fahrenheit 451 “You can tell yourself that you would be willing to lose everything you have in order to get something you want. But it’s a catch-22: all of those things you’re willing to lose are what make you recognizable. Lose them, and you’ve lost yourself.” – Jodi Picoult, Handle With Care “You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose. You’re on your own. And you know what you know. And YOU are the one who’ll decide where to go…” – Dr. Seuss, Oh, the Places You’ll Go! “I had forgotten that time wasn’t fixed like concrete but in fact was fluid as sand, or water. I had forgotten that even misery can end. ” – Joyce Carol Oates, I am No One You Know “Without music, life would be a mistake.” – Friedrich Nietzsche, Twilight of the Idols “This is what you shall do; Love the earth and sun and the animals, despise riches, give alms to every one that asks, stand up for the stupid and crazy, devote your income and labor to others, hate tyrants, argue not concerning God, have patience and indulgence toward the people, take off your hat to nothing known or unknown or to any man or number of men, go freely with powerful uneducated persons and with the young and with the mothers of families, read these leaves in the open air every season of every year of your life, re-examine all you have been told at school or church or in any book, dismiss whatever insults your own soul, and your very flesh shall be a great poem and have the richest fluency not only in its words but in the silent lines of its lips and face and between the lashes of your eyes and in every motion and joint of your body.” – Walt Whitman, Song of Myself “It’s a very Greek idea, and a very profound one. Beauty is terror. Whatever we call beautiful, we quiver before it. And what could be more terrifying and beautiful, to souls like the Greeks or our own, than to lose control completely? To throw off the chains of being for an instant, to shatter the accident of our mortal selves? Euripides speaks of the Maenads: head thrown I back, throat to the stars, “more like deer than human being.” To be absolutely free! One is quite capable, of course, of working out these destructive passions in more vulgar and less efficient ways. But how glorious to release them in a single burst! To sing, to scream, to dance barefoot in the woods in the dead of night, with no more awareness of mortality than an animal! These are powerful mysteries. The bellowing of bulls. Springs of honey bubbling from the ground. If we are strong enough in our souls we can rip away the veil and look that naked, terrible beauty right in the face; let God consume us, devour us, unstring our bones. Then spit us out reborn.” – Donna Tartt, The Secret History “We are the music-makers, And we are the dreamers of dreams, Wandering by lone sea-breakers, And sitting by desolate streams. World-losers and world-forsakers, Upon whom the pale moon gleams; Yet we are the movers and shakers, Of the world forever, it seems.” – Arthur O’Shaughnessy, Poems of Arthur O’Shaughnessy

How to use this component

One Two Three Content 1 Content 2 Content 3 
<i80-tabs>
  <i80-tab>One</i80-tab>
  <i80-tab>Two</i80-tab>
  <i80-tab>Three</i80-tab>

  <i80-tab-panel>Content 1</i80-tab-panel>
  <i80-tab-panel>Content 2</i80-tab-panel>
  <i80-tab-panel>Content 3</i80-tab-panel>
</i80-tabs>

Size

Set size to "large" to display the large Tabs variant. The default size is "medium".

One Two Three Content 1 Content 2 Content 3 
<i80-tabs size="large">
  <i80-tab>One</i80-tab>
  <i80-tab>Two</i80-tab>
  <i80-tab>Three</i80-tab>

  <i80-tab-panel>Content 1</i80-tab-panel>
  <i80-tab-panel>Content 2</i80-tab-panel>
  <i80-tab-panel>Content 3</i80-tab-panel>
</i80-tabs>

Pre-selecting a tab

The first tab is selected by default. To display a different tab on page load, add the selected attribute to one of the <i80-tab> elements. From that moment on, the tab selection is controlled internally by the component.

One Two Three Content 1 Content 2 Content 3, I am displayed on page load. 
<i80-tabs>
  <i80-tab>One</i80-tab>
  <i80-tab>Two</i80-tab>
  <i80-tab selected>Three</i80-tab>

  <i80-tab-panel>Content 1</i80-tab-panel>
  <i80-tab-panel>Content 2</i80-tab-panel>
  <i80-tab-panel>Content 3, I am displayed on page load.</i80-tab-panel>
</i80-tabs>

Count and icon

One Two Three Content 1 Content 2 Content 3! 
<i80-tabs>
  <i80-tab count="5">One</i80-tab>
  <i80-tab icon="download">Two</i80-tab>
  <i80-tab>Three</i80-tab>

  <i80-tab-panel>Content 1</i80-tab-panel>
  <i80-tab-panel>Content 2</i80-tab-panel>
  <i80-tab-panel>Content 3!</i80-tab-panel>
</i80-tabs>

Nested tabs

We don’t recommend nesting tabs, but in case it’s necessary to implement such a feature, nest an <i80-tabs> inside an <i80-tab-panel> as it is.

🐤 Birds 🐠 Fishes 🐙 Cephalopods 🦜 Parrots 🦅 Eagles 🦉 Owls

🦜 Content for Parrots

🦅 Content for Eagles

🦉 Content for Owls

 🐬 Dolphins 🦈 Sharks

🐬 Content for Dolphins

🦈 Content for Sharks

🐙 Content for Cephalopods

 
<i80-tabs>
  <i80-tab>🐤 Birds</i80-tab>
  <i80-tab>🐠 Fishes</i80-tab>
  <i80-tab>🐙 Cephalopods</i80-tab>

  <i80-tab-panel>
    <i80-tabs>
      <i80-tab>🦜 Parrots</i80-tab>
      <i80-tab>🦅 Eagles</i80-tab>
      <i80-tab>🦉 Owls</i80-tab>

      <i80-tab-panel><p>🦜 Content for Parrots</p></i80-tab-panel>
      <i80-tab-panel><p>🦅 Content for Eagles</p></i80-tab-panel>
      <i80-tab-panel><p>🦉 Content for Owls</p></i80-tab-panel>
    </i80-tabs>
  </i80-tab-panel>
  <i80-tab-panel>
    <i80-tabs>
      <i80-tab>🐬 Dolphins</i80-tab>
      <i80-tab>🦈 Sharks</i80-tab>

      <i80-tab-panel><p>🐬 Content for Dolphins</p></i80-tab-panel>
      <i80-tab-panel><p>🦈 Content for Sharks</p></i80-tab-panel>
    </i80-tabs>
  </i80-tab-panel>
  <i80-tab-panel><p>🐙 Content for Cephalopods</p></i80-tab-panel>
</i80-tabs>

Attributes

<i80-tabs> renders this component. Everything it understands:

Attribute Values Default Notes
size medium · large medium
selected index 0 The selected tab, from 0. Or put selected on an <i80-tab>. Event: i80-change with detail.index.
i80-tab-panel The panel for the tab in the same position; it can be empty while the tab is being built.
i80-tab icon · count · selected One tab; its text is the label.
i80-tab-panel The content for the tab in the same position.

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

Anatomy

Tab container anatomy

Element Usage
Tab Required, two minimum
Content area Required, Tabs should never be used alone

Tab items anatomy

Element Usage
Selected Required, one is always selected
Bottom border Required
Icon Optional
Text Required
Count Optional
Indicator Required, displayed on selected Tab

States

Tab states

Tabs should be short and concise, and a good indication of what content the user can expect to find within the TabPanel. They should not consist of full sentences.

Conformance rating

Conformant

Animation

No indicator animation will be present for users that have enabled prefers-reduced-motion.

Keyboard navigation

Tab

Focus on a tab

Keyboard tab navigation example

Spacebar
Enter

Activate tab to display matching content area

Keyboard tab navigation example

Move between tabs

If focus is on the first tab, left arrow moves focus to the last tab. If focus is on the last tab, right arrow moves focus to the first tab. Home and End go straight to the first and the last tab.

Keyboard tab navigation example

Tab

Move to interactive element within the content area

Keyboard tab navigation example

Applicable WCAG Success Criteria

  • 1.3.1 Info and Relationships (Level A):
    Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
  • 1.3.2 Meaningful Sequence (Level A):
    When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
  • 1.4.1 Use of Color (Level A):
    Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
  • 1.4.10 Reflow (Level AA):
    Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions.
  • 1.4.11 Non-text Contrast (Level AA):
    The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): user interface components; graphical objects.
  • 1.4.12 Text Spacing (Level AA):
    No loss of content or functionality occurs by setting all of the following and by changing no other style property: line height set to 1.5; spacing following paragraphs set to at least 2x the font size; letter-spacing set at least 0.12x of the font size, word spacing set to at least 0.16 times the font size.
  • 1.4.13 Content on Hover or Focus (Level AA):
    Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: dismissible, hoverable, persistent (see link).
  • 1.4.3 Minimum Contrast (Level AA):
    The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
  • 1.4.4 Resize Text (Level AA):
    Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
  • 2.1.1 Keyboard (Level A):
    All functionality of the content is operable through a keyboard interface.
  • 2.1.2 No Keyboard Trap (Level A):
    If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface.
  • 2.4.6 Headings and Labels (Level AA):
    Headings and labels describe topic or purpose.
  • 2.4.7 Focus Visible (Level AA):
    Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
  • 3.2.1 On Focus (Level A):
    When any user interface component receives focus, it does not initiate a change of context.
  • 4.1.2 Name, Role, Value (Level A):
    For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).

Related

On this page: