With Tabs
A page title with a row of tabs beneath it for switching sections. Use it on profile or settings screens that split content across many views.
A page title with a row of tabs beneath it for switching sections. Use it on profile or settings screens that split content across many views.
Search blocks by description or jump to a page.
With Tabs is a page heading for content that splits across multiple sections. A large bold title sits at the top left with a short description beneath it. On the right, a search input with a leading icon sits next to a Filters button so users can narrow results without leaving the page. Below the title row, a tab strip runs along a bottom border with one active tab underlined and the rest in a muted state, ready to switch sections on click.
The title, description, and tab labels are all independent copy. You can add or remove tabs freely, swap the active default, or drop the search and filter controls entirely if the screen does not need them. On smaller screens the title and controls stack vertically so the layout stays usable at any width.
Reach for this block on any screen where a catalog or record set divides into named states. A product catalog with All, Active, Draft, and Archived views is the clearest fit, and the built-in search and filter controls mean you rarely need a second toolbar. It works better than a plain heading when the content beneath it has two or more meaningful filters that users will switch between repeatedly.
A natural flow around it on an Application page:
Before
After
Any resource type that has a small set of named statuses fits this frame well. A few specific uses for an ecommerce storefront:
Tip: keep the tab count to five or fewer so the strip stays legible on mobile without wrapping or truncating labels.