Website Header

Website Header components are used to display the header of the website. They are commonly used in websites like Hubtel Web to provide a navigation menu and a logo used to identify the website.

Usage

Loading Code Block...

Full example

Loading Code Block...

Subpages

Loading Code Block...

Webapp

Loading Code Block...

---

Props

Types

The nav-items prop (navItems in React, navigationItems in Vue) is a discriminated union — pass either link entries or menu (dropdown) entries:

type NavItem =
  | { type: "link"; label: string; href: string; active?: boolean }
  | {
      type: "menu";
      label: string;
      links: Array<{ label: string; href: string }>;
      active?: boolean;
    };

// React account shape
type Account = {
  id: string;
  name: string;
  email?: string;
  avatarImage?: string;
  isActive?: boolean;
};

// Vue account shape — Avatar-shaped directly
type AccountVue = {
  title?: string;
  image?: string;
  subtext?: string;
};

Webapp specific props

Props	Default	Type	Description
slotContent	null	ReactNode	React only. Content rendered next to the logo when type='webapp' and the user is authenticated (commonly a search bar). Vue exposes the same seam as a #search-area named slot.

Subpages specific props

Props	Default	Type	Description
pageTitle	null	string	Page title for subpages type

Accessibility

• The Website Header embeds semantic <nav> wrappers and structural aria-labels representing primary site routing.
• The component is built structurally to automatically handle shrinking visibilities where menus collapse into responsive drawer panels, natively passing keyboard-focus traps into the rendered drawers.
• Interactive nested elements (dropdowns inside navigation layers) contain distinct active states and are perfectly usable via strict Tab targeting on desktop widths.

Best practices

Keep top-level links few

A cluttered header creates high cognitive overload. Compress secondary navigation items securely under categorized dropdowns rather than printing 9 individual links across the banner.

Responsive planning

Website Header heavily adapts based on screen sizes. The desktop nav links and inline layout activate at the lg breakpoint (992px); below that, all nav items collapse into the hamburger drawer. Always test small viewports (320px width) where everything funnels into the hamburger Drawer icon.

Auth states

Do not render the notification or cart bells out unconditionally. Always gate them correctly behind the isAuthenticated prop so they disappear organically when the user is logged out, protecting against non-functional clicks.