Navigation
Consistent navigation helps users orient themselves and move efficiently through your application. The design system provides components for global headers, sidebars, breadcrumbs, and tabbed content.
Global Header
The eds-header provides branding, navigation links, and slot-based actions:
Variants
| Variant | Description | Use For |
|---|---|---|
default | Light header | Standard pages |
inverse | White background | Content-heavy pages |
strong | Dark background, light text | Landing pages, branded sections |
Sidebar Navigation
The eds-sidebar renders a collapsible tree navigation from a JSON data structure:
Themes
| Theme | Description |
|---|---|
default | Standard sidebar |
ebrains | EBRAINS-branded sidebar |
minimal | Minimal, lightweight appearance |
Breadcrumbs
Show the user’s location in the site hierarchy:
The last item (no url) renders as plain text for the current page.
Tabs
Use eds-tabs for switching between views within the same page:
Variants
| Variant | Description |
|---|---|
default | Dark pill container |
inverse | Light pill container |
Combining Components
A typical EBRAINS application navigation stack:
Mobile Navigation
On small screens (< 1024px):
- The sidebar hides off-screen and opens via a burger menu button
- The header collapses navigation links into a menu toggle
- Breadcrumbs remain visible for orientation
- Tabs scroll horizontally if they overflow
Implement the burger toggle:
Best Practices
- Always include a header and footer on full pages
- Use breadcrumbs on pages deeper than one level
- Sidebar items should have icons for quick scanning
- Highlight the active item with
active-url - Use tabs for content switching within a page, not for site-level navigation
- Keep header actions minimal — 2-3 links maximum
- Test the burger menu flow on mobile