@zebra-fed/zeta-web
    Preparing search index...

    Class ZetaGlobalHeader

    A header component which can contain branding, navigation, search, and user profile actions. Header will only allow a maximum of 6 menu items and 6 action items. Any additional items will be hidden. If you have a maximum amount (6) of menu and action items, the search bar will be hidden at a screen size of 1440px or smaller.

    platform-name - Slot for the platform name in the header. Falls back to the platformName property if not provided.

    menu-items - Slot for menu items on the left side of the header. Expects elements of type zeta-button or zeta-dropdown-menu-button.

    action-items - Slot for action items on the right side of the header. Expects elements of type zeta-icon-button or zeta-action-menu-button.

    user-avatar - Slot for user avatar. Input should be of type zeta-avatar. You must set the size prop to xxs.

    logo - Slot for a custom logo to replace the default Zebra logo.

    logo - The container for the logo in the header. By default, this will contain the Zebra logo, but if you use the "logo" slot, your custom logo will be placed here instead.

    https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=23144-118110

    https://design.zebra.com/web/storybook/?path=/docs/components-global-header--docs

    <zeta-global-header
     platformName="Platform Name"
     name="Name"
     initials="RK"
     appSwitcher
     searchbar
     rounded
    >
    <zeta-button slot="menu-items"></zeta-button>
    <zeta-icon-button slot="action-items"></zeta-icon-button>
    <zeta-avatar slot="user-avatar" size="xxs">${this.initials}</zeta-avatar>
    </zeta-icon-button></zeta-global-header>

    Hierarchy

    • ContourableInterface<this> & LitElement<this>
      • ZetaGlobalHeader
    Index

    Other

    constructor actionItems appSwitcher initials menuItems name platformName? rounded searchbar theme styles updated

    rendering

    render

    Other

    • Returns ZetaGlobalHeader

    actionItems: Node[]

    Slot for action items on the right side of the header. Expects elements of type zeta-icon-button or zeta-action-menu-button.

    appSwitcher: boolean = false

    Shows the app switcher icon. Make true to show the app switcher icon.

    initials: string = "RK"

    The initials to display within the user icon.

    menuItems: Node[]

    Slot for menu items on the left side of the header. Expects elements of type zeta-button or zeta-dropdown-menu-button.

    name: string = "Name"

    The name to show in the header, next to the user icon.

    platformName?: string

    The platform name text on the header.

    The 'platformName' property is deprecated. Please use the default slot to set the platform name instead.

    rounded: boolean
    searchbar: boolean = false

    Shows the search bar. Make true to show the search bar.

    user-info-click - Fired when the user info button is clicked. hamburger-menu-click - Fired when the hamburger menu button is clicked.

    theme: string = "dark"

    Autoset the theme to dark mode for this component.

    styles: CSSResultGroup[] = ...

    • Checks the slots for items after the component has been updated. This ensures that any changes to the slotted content are detected and the state is updated accordingly.

      Returns void

    rendering

    • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

      Returns TemplateResult<1>

    Settings

    Member Visibility

    On This Page

    Other
    rendering