Carbon Global Header pattern
Documents the UI shell header as persistent global navigation, including system and product links, responsive movement into panels, sense of place, and state preservation.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Global navigation | Choose global navigation when users need repeated access to a small set of top-level product or service sections. | Activating a global navigation item changes to the named top-level section and updates current-state semantics. | Carbon global header guidance documents persistent global navigation, system versus product link placement, responsive movement to panels, and state preservation. |
| Header / top app bar | Choose a header/top app bar when each screen needs a current title plus view-level actions such as search, share, edit, save, or overflow. | The title in the bar must match the rendered content or current route. | Carbon UI shell header style guidance documents header structure, action states, sticky behavior, and responsive collapse. |
| Mega menu | Choose a mega menu when a top-level section has a deep hierarchy or more links than a basic dropdown can comfortably present. | Activating a mega-menu trigger opens the panel and updates aria-expanded on that trigger. | Carbon header guidance supports product navigation submenus, utility separation, and responsive collapse into panels. |
| Utility navigation | Choose utility navigation for controls whose primary job is session management, account access, support, search entry, notifications, language, product switching, or global tools. | Activating a utility button opens the corresponding panel, menu, tray, or inline search surface without changing the current primary destination. | Carbon identifies utility icons as globally persistent system-level controls that should open panels, while system and product links have separate placement. |
Comparisons supported by this source
- Global navigation vs breadcrumbs vs bottom navigation
Carbon global header guidance supports persistent global navigation, system/product separation, responsive panels, and preserving UI state.
- Header / top app bar vs global navigation vs bottom navigation
Carbon UI shell header guidance supports structural distinction between header, links, actions, and responsive collapse.
- Mega menu vs global navigation vs navigation drawer
Carbon header guidance supports separating product navigation, submenus, utilities, and responsive collapse behavior.
- Service navigation vs global navigation vs side navigation
Carbon global header guidance helps distinguish whole-product navigation from service-scoped navigation.
- Side navigation vs global navigation vs tabs
Carbon global header guidance helps distinguish product-wide header navigation from local side navigation.
- Utility navigation vs global navigation vs service navigation
Carbon global header guidance identifies utilities as globally persistent system-level controls and says utility icons should open panels rather than directly navigate.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: IBM Carbon Design System. Last checked: .