Header
Introduces a page and can contain its identity, breadcrumbs, and actions.
Use the HTML <header> element for introductory content at the top of a page. This example shows the application name with the Breadcrumbs component.
- Place the page-level header before the main content.
- Give each navigation landmark a descriptive accessible name.
- Use links for navigation and buttons for actions.
- On narrow viewports, follow the Breadcrumbs truncation example to keep long trails compact and make hidden items available through a labeled control.
🚫 Don’t
Section titled “🚫 Don’t”- Don’t add more than one page-level header to a page.
- Don’t use the page-level header for a section or widget.