Use the header to signal to users they are in the right place. Contains primary site navigation, title and key logos. View this component on GitHub

Basic
Menu items
Signed out
Signed in
Accessibility
Props
Events
Methods
CSS Shadow Parts
CSS Custom Properties
Slots

Basic

The header component enables users to navigate the site and go back to home. There are a variety of versions, depending on your design.

<admiralty-header header-title="Design System" logo-img-url="/svg/Admiralty stacked logo.svg">
</admiralty-header>

<admiralty-header header-title="Design System" logo-img-url="/svg/Admiralty stacked logo.svg">
</admiralty-header>

<AdmiraltyHeader headerTitle="Design System" logoImgUrl="/svg/Admiralty stacked logo.svg">
</AdmiraltyHeader>

Use menu items and sub items to allow users to navigate the site. Active states let them know which page they are on.

Menu items should include a URL value for the href prop so that the component can render a functional link, allowing users to navigate to the specified destination when they click on the menu item. The exception is when the menu item contains sub menu items.

When a navigation router is being used, for instance in Angular or React, the default browser redirect can be suppressed. The onMenuItemClick event can then be used to call the framework's navigation function, which will prevent a full page reload when navigating between pages.

<admiralty-header
  logo-alt-text="ADMIRALTY"
  logo-link-url="http://www.example.com"
  logo-img-url="svg/Admiralty stacked logo.svg"
  header-title-url="#"
  header-title="Design System"
>
  <admiralty-header-menu-item menu-title="Item 1" active="false" slot="items">
    <admiralty-header-sub-menu-item menu-title="sub item 1" href="/item-1-1"></admiralty-header-sub-menu-item>
    <admiralty-header-sub-menu-item
      menu-title="Super long sub navigation item for wrapping"
      href="/item-1-2"
    ></admiralty-header-sub-menu-item>
    <admiralty-header-sub-menu-item menu-title="sub item 3" href="/item-1-3"></admiralty-header-sub-menu-item>
  </admiralty-header-menu-item>
  <admiralty-header-menu-link menu-title="Item 2" active="false" href="/item-2" suppress-redirect="true" slot="items">
  </admiralty-header-menu-link>
  <admiralty-header-menu-item menu-title="Item 3" active="false" slot="items">
    <admiralty-header-sub-menu-item menu-title="sub item 1" href="/item-3-1"></admiralty-header-sub-menu-item>
  </admiralty-header-menu-item>
  <admiralty-header-profile is-signed-in="false" signed-in-text="Mr Admiral" slot="profile"></admiralty-header-profile>
</admiralty-header>

<admiralty-header
  logo-alt-text="ADMIRALTY"
  logo-link-url="http://www.example.com"
  logo-img-url="svg/Admiralty stacked logo.svg"
  header-title-url="#"
  header-title="Design System"
>
  <admiralty-header-menu-item menu-title="Item 1" active="false" slot="items">
    <admiralty-header-sub-menu-item menu-title="sub item 1" href="/item-1-1"></admiralty-header-sub-menu-item>
    <admiralty-header-sub-menu-item
      menu-title="Super long sub navigation item for wrapping"
      href="/item-1-2"
    ></admiralty-header-sub-menu-item>
    <admiralty-header-sub-menu-item menu-title="sub item 3" href="/item-1-3"></admiralty-header-sub-menu-item>
  </admiralty-header-menu-item>
  <admiralty-header-menu-link menu-title="Item 2" active="false" href="/item-2" suppress-redirect="true" slot="items">
  </admiralty-header-menu-link>
  <admiralty-header-menu-item menu-title="Item 3" active="false" slot="items">
    <admiralty-header-sub-menu-item menu-title="sub item 1" href="/item-3-1"></admiralty-header-sub-menu-item>
  </admiralty-header-menu-item>
  <admiralty-header-profile is-signed-in="false" signed-in-text="Mr Admiral" slot="profile"></admiralty-header-profile>
</admiralty-header>

<AdmiraltyHeader
  logo-alt-text="ADMIRALTY"
  logo-link-url="http://www.example.com"
  logo-img-url="svg/Admiralty stacked logo.svg"
  header-title-url="#"
  header-title="Design System">
  <AdmiraltyHeaderMenuItem menu-title="Item 1" active={false} slot="items">
    <AdmiraltyHeaderSubMenuItem menu-title="sub item 1" href="/item-1-1"></AdmiraltyHeaderSubMenuItem>
    <AdmiraltyHeaderSubMenuItem
      menu-title="Super long sub navigation item for wrapping"
      href="/item-1-2"></AdmiraltyHeaderSubMenuItem>
    <AdmiraltyHeaderSubMenuItem menu-title="sub item 3" href="/item-1-3"></AdmiraltyHeaderSubMenuItem>
  </AdmiraltyHeaderMenuItem>
  <AdmiraltyHeaderMenuLink
    menu-title="Item 2"
    active={false}
    href="/item-2"
    suppress-redirect={true}
    slot="items"></AdmiraltyHeaderMenuLink>
  <AdmiraltyHeaderMenuItem menu-title="Item 3" active={false} slot="items">
    <AdmiraltyHeaderSubMenuItem menu-title="sub item 1" href="/item-3-1"></AdmiraltyHeaderSubMenuItem>
  </AdmiraltyHeaderMenuItem>
  <AdmiraltyHeaderProfile is-signed-in={false} signed-in-text="Mr Admiral" slot="profile"></AdmiraltyHeaderProfile>
</AdmiraltyHeader>

Signed out

Use to provide the ability for users to sign in.

<admiralty-header header-title="Design System" logo-img-url="/svg/Admiralty stacked logo.svg">
    <admiralty-header-profile slot="profile" is-signed-in="false" signed-in-text="Mr Admiral" sign-in-only="false"></admiralty-header-profile>
</admiralty-header>

<admiralty-header header-title="Design System" logo-img-url="/svg/Admiralty stacked logo.svg">
    <admiralty-header-profile slot="profile" is-signed-in="false" signed-in-text="Mr Admiral" sign-in-only="false"></admiralty-header-profile>
</admiralty-header>

<AdmiraltyHeader headerTitle="Design System" logoImgUrl="/svg/Admiralty stacked logo.svg">
    <AdmiraltyHeaderProfile slot="profile" is-signed-in={false} signed-in-text="Mr Admiral" sign-in-only={false} ></AdmiraltyHeaderProfile>
</AdmiraltyHeader>

Signed in

This allows users to view their profile and sign out. Use the profile button to display the user's name.

<admiralty-header header-title="Design System" logo-img-url="/svg/Admiralty stacked logo.svg">
    <admiralty-header-profile slot="profile" is-signed-in="true" signed-in-text="Mr Admiral" sign-in-only="false"></admiralty-header-profile>
</admiralty-header>

<admiralty-header header-title="Design System" logo-img-url="/svg/Admiralty stacked logo.svg">
    <admiralty-header-profile slot="profile" is-signed-in="true" signed-in-text="Mr Admiral" sign-in-only="false"></admiralty-header-profile>
</admiralty-header>

<AdmiraltyHeader headerTitle="Design System" logoImgUrl="/svg/Admiralty stacked logo.svg">
    <AdmiraltyHeaderProfile slot="profile" is-signed-in="true" signed-in-text={true} sign-in-only={false} ></AdmiraltyHeaderProfile>
</AdmiraltyHeader>

Accessibility

The header is labelled to enable ease of navigation including keyboard, tab usage.

Props

Name

Type

Default

Description

header-title

string

undefined

The header title that is displayed to the right of the logo

header-title-url

string

null

The url that clicking on the nav link will take you too

logo-alt-text

string

'ADMIRALTY'

The alternate image text for the logo image

logo-img-url

string

'svg/Admiralty stacked logo.svg'

The uri of the logo image

logo-link-url

string

'https://www.admiralty.co.uk/'

The destination url when the logo is clicked

Events

Name

Description

titledClicked

Emits an event that can be listened to when the title in the header is clicked

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name

Description

--admiralty-header-brand-font-size

Font weight of the header brand

--admiralty-header-branding-not-desktop-padding

Padding for the header's branding when not in desktop view.

--admiralty-header-branding-padding

Padding for the header's branding.

--admiralty-header-font-size

Font size of the header

--admiralty-header-font-weight

Font weight of the header

--admiralty-header-menu-icon-font-size

Font size of the header menu icon

--admiralty-header-menu-icon-font-weight

Font weight of the header menu icon

--admiralty-header-menu-mobile-button-icon-padding

Padding for the button icon when in mobile view.

--admiralty-header-menu-section-tablet-only-margin-left

Margin left for the menu section when in tablet view only.

--admiralty-header-title-font-size

Font size of the header title

--admiralty-header-title-font-weight

Font weight of the header title

--admiralty-header-title-margin-bottom

Margin bottom for the header title

--admiralty-header-title-margin-top

Margin top for the header title.

--admiralty-header-title-not-desktop-font-size

Font size of the header title when not in desktop view

--admiralty-header-vertical-separator-margin

Margin for the vertical separator.

--admiralty-header-vertical-separator-not-desktop-margin

Margin for the vertical separator when not in desktop view.

Slots

Name

Description

items

'admiralty-header-menu-item menu-title' and 'admiralty-header-menu-link menu-title' components are placed here for appropriate styling and behaviour

profile

'admiralty-header-profile' components are placed here (the login/logout) options

Header

Contents

Basic

Menu items

Signed out

Signed in

Accessibility

Props

Events

Methods

CSS Shadow Parts

CSS Custom Properties

Slots