Navigation
Global header
When to use
Permanently anchored to the top of the screen across all pages and apps, for access when users:
- Switch between product areas or catalogs.
- Access global tools such as search or notifications.
- View account and profile options.
Style
- Only the branded title and navigation context change between applications.
- Utility icons (notifications, help, profile) should be unlabeled but include tooltips.
Behavior
Nav elements should be adapted to reflect the current app (Studio, Explorer, Admin, and so on).
Side nav
When to use
Permanently anchored (though collapsible) to the left side of all apps in which it is available, for persistent access to primary sections of the product.
Style
- Clarity: use short, descriptive labels that match the text used in page headers.
- Consistency: keep naming and order consistent across the platform.
- Use plain language and common industry terms.
Behavior
- Highlight the current section (and its parent if applicable) in the hierarchy.
- The side nav collapses and expands in response to different screen sizes.
Breadcrumbs
Usage
Follow the pattern: Main component / Sub component / Specific item or page name.
Style
- Use the exact page or item name at each level.
- Do not truncate unless space is severely limited.
- The current page is not a link - it is plain text at the end of the breadcrumb trail.
Tabs
When to use
To switch between related views on the same page without full navigation.
Style
- Tab labels are short nouns or noun phrases. For example, Overview, Lineage, Settings.
- Use sentence case.
- Avoid verbs in tab labels.
Pagination
Style
- Label page controls plainly. Use Previous and Next.
- Show total result count when relevant. For example,
Showing 1–25 of 340 results.