Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • High contrast mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
    • Typography
  • Templates
    • Page template
    • Sitewide search
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Buttons
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
      • Guidelines
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
    • Tables
    • Data grid
  • Editors & Syntax
    • Code
    • Markdown
  • Utilities
    • Accessibility
    • Auto sizer
    • Beacon
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Navigation
  • Tabs
  • Guidelines

Tabs guidelines

Do

Follow best practices. Use tabs to organize in-page content. Each tab should contain a segment of information relevant to the current subject. For more UX tips see

NNG's article "Tabs, Used Right".

Do

For tabs showing primary page content, use the

href prop to change the current URL hash. Ensure the tab selection is persisted in the user's navigation history and works with the browser's back button.

Do

Ensure when a page is loaded with a URL hash representing a selected tab (as applied by the href prop), that the corresponding tab is shown using the selectedTab prop.

Don't

Apply the href prop to change the current page URL hash on more than one set of tabs per page, or non-primary content.

Don't

Keep users on the same page visually, but change the higher-level navigation logically. Tabs should keep users at the same place within an application. Breadcrumbs and main navigation should not change. The URL hash is the only thing that should change.

Edit this page
Previous
Tabs
Next
Tree view
  • Do
  • Do
  • Do
  • Don't
  • Don't
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic