Header
<esp-header>
Used to build the top navigation for a site. An empty header
displays a bar. It has three slots for populating header content:
brand, menu, and buttons.
The header works together with several companion components:
<esp-menu> provides the navigation
container, <esp-menu-item>
renders individual links, and
<esp-header-button> adds icon
buttons for global actions.
Slots
<esp-header> has the following slots:
brand
Place site brand here. Typically an anchor wrapping a logo SVG or image. The brand container supports vertical alignment via --esp-header-brand-placement.
menu
Place site navigation here. The menu slot should be populated with an <esp-menu> containing <esp-menu-item> children:
When there are too many <esp-menu-item>s on the screen, a burger button automatically appears that slides the full menu into view. Resize the screen to see the responsive behavior:
buttons
Place icon buttons for global actions here. The buttons slot should contain <esp-header-button> instances. Each button has a default slot for an SVG icon and fires a clicked event when activated:
Attributes
<esp-header> has the following attributes:
show-burger
show-burger has a default value of false.
Force the burger button to be visible regardless of the
menu width. Use this when the burger controls an external
element (e.g. a sidebar drawer) instead of the built-in
<esp-menu> overlay.
Methods
<esp-header> has the following methods:
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
CSS Properties
<esp-header> has the following CSS properties:
--esp-header-background
The background color of the header bar. Defaults to var(--esp-color-layer-2).
--esp-header-border-width
The border width of the header. Defaults to 0 0 1px 0.
--esp-header-border
The border style of the header. Defaults to solid var(--esp-color-border).
--esp-header-shadow
The box shadow of the header. Defaults to 0 0 2px var(--esp-color-shadow).
--esp-header-height
The height of the header bar. Defaults to calc(4.5 * var(--esp-size-small)).
--esp-header-brand-placement
The CSS place-content value for the brand container. Defaults to center.
--esp-header-button-closed-color
The color of the burger button when the menu is closed. Defaults to var(--esp-color-headings).
--esp-header-button-closed-hover-color
The hover color of the burger button when the menu is closed. Defaults to var(--esp-color-headings-hover).
--esp-header-button-open-color
The color of the burger button when the menu is open. Defaults to var(--esp-color-text).
--esp-header-button-open-hover-color
The hover color of the burger button when the menu is open. Defaults to var(--esp-color-headings-hover).
--esp-header-button-stroke-width
The stroke width of the burger button lines. Defaults to 0.45rem.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).