UnderlinePanels

The underline panels are used to break related content into tabbed panels.

The underline nav guidelines cover the design guidelines not mentioned here.

The guidelines on this page only highlight the differences between underline panels and underline nav.

Usage

Underlined panels let users switch between 2 or more related panels of content without changing the URL or leaving their current context.

If you want to use this pattern for tabs that change the URL when activated, use the underline nav component instead.

Best practices

  • One of the tabs should be selected by default when the user loads the page.
  • Avoid overwhelming the user with too many tabs. If you have too many tabs, try grouping your content into broader categories or exposing more of the content on the page without requiring the user to click into a tab.
  • Each view should have enough information so the user can complete their tasks without switching back and forth between tabs.
  • Views should be able to be navigated in any order. This is not a pattern for navigating stepped flows.

Accessibility

Underline panels are made of the following ARIA roles:

  • tablist: the container wrapping the tabs
  • tab: each individual tab
  • tabpanel: the container wrapping the content associated with each tab

The active tab is conveyed to assistive technologies using the aria-selected attribute. Each tab is associated with it's corresponding panel using the aria-controls attribute.

Icons in UnderlinePanels.Tab are purely decorative and are hidden from screen readers by default. If the icon does convey any informational meaning, the adjacent text inside of the tab must provide all the necessary information without relying on the icon itself.

Keyboard navigation

Underline panels' tabs follow the automatic activation pattern. This means that when a tab receives focus, the tab is activated and the associated panel is displayed.

Key(s)Description
Enter or SpaceActivates the focused tab.
TabWhen focus moves into the tab list, focus goes to the active tab.
When the tab list contains focus, moves focus to the next element in the page tab sequence outside the tablist.
Arrow LeftMoves focus to the previous tab. If focus is on the first tab, focus moves to the last tab.
The focused tab is activated.
Arrow RightMoves focus to the next tab. If focus is on the last tab, focus moves to the first tab.
The focused tab is activated.
HomeMoves focus to the first tab and activates it.
EndMoves focus to the last tab and activates it.

Known accessibility issues (GitHub staff only)

View open accessibility issues related to this component