Tabs

Tabs in Astro Applications are used to divide major areas of content and to indicate work process.

Rules of Thumb

  • Use only one row of Tabs.
  • Use Higher Level Tabs only on top of the panel.
  • Tab labels should not be more than two words and should accurately reflect what underlying content the user can expect to reveal.
  • Use title-style capitalization for labels.
  • High level tabs are often used to organize an application by work process.

Interior/Compact Tabs

For use outside of main navigation, a more compact tab component can be used.

Rules of Thumb

  • Use only one row of Tabs.
  • Tab labels should not be more than two words and should accurately reflect what the user can expect to see.
  • Use title-style capitalization for labels.

Examples

nav tabs do

nav tabs do

Do: To guide users through a process, correctly place and label Tabs to reflect a step-by-step process.

nav tabs dont

nav tabs dont

Don’t: Stack or improperly nest Tabs.

×