Usage
The Page Header shows the current page's title, main actions, and optional description. It includes back navigation for nested pages, helping users understand their location in the app and move back easily.
Best practices
Do
Use Page Header only at the top of the page.
Don't
- Don’t use multiple Page Headers on one page
- Don’t use Page Header in a modal dialog
Do
Use header to hold primary actions of the page.
Don't
Avoid overcrowding the header with too many actions. If you need more actions or are designing for mobile, prioritize them. Place less important actions in a dropdown menu.
Examples
Live Preview
Props
Fetching props...
Slots
Fetching slots...