Skip to content

Admin UI: Page header design spec #76709

@grbicsanja

Description

@grbicsanja

Universal page header component

Figma spec link

Essential header elements

  • Title (Heading LG (15/20)
  • Header background color is the same as Page background (Default: wpds/color/background/surface)
  • Border: Always present, 1px, neutral
Image

Optional header elements

  • Logo/Decoration: 20×20px
  • Badge: Indicating status
  • Tagline: Page summary, brief intro to product, etc
  • Breadcrumb
    • When breadcrumbs are shown, the page title should be hidden (but still present) to avoid visually duplicating page info.
  • Navigation: Optional
  • Actions:
    • Button size is compact
    • Number of actions in the header: MIN 0, MAX 3
    • Only 1 primary button, up to 2 secondary buttons
    • Tertiary actions stay behind the ellipsis menu
  • Controls slot:
    • An optional slot for search, DataViews controls and other needed actions
    • When navigation is not present, controls can float left or right
Image

Aditional guidelines

  • On scroll: Stickiness is optional
  • Actions: Primary button is always positioned to the right
Image

Responsiveness

  • Long titles are truncated
  • Everything except the primary action moves inside the ellipsis menu. If there was no ellipsis menu initially, one is generated.
  • At a certain breakpoint the logo disappears and the hamburger is revealed.
  • If space allows, Hamburger, Title, and Actions remain on one line.
  • On scroll, the tagline/description disappears.
  • Breadcrumb is always constrained to a single line. Once it's unable to shrink to fit any more, it moves to the line below.
  • Navigation: Horizontal scroll
  • If space allows, controls stay in line with navigation
  • When there's no space, controls stack underneath the navigation and can float right or left.
Image Image Image Image

@WordPress/gutenberg-components
@WordPress/gutenberg-design

@keoshi @jameskoster @poligilad-auto @verofasulo @simison

Metadata

Metadata

Assignees

No one assigned

    Labels

    Design SystemIssues related to the system of combining components according to best practices.[Package] Admin UI/packages/admin-ui[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions