@phila/phila-ui-app-header

Code Samples

Basic

The most basic header with an application title and sub-title.

  <app-header
    app-title="My Application"
    app-subtitle="Description about this application"
  />

Branding

Adds an application specific logo and link. Often used to display a department's logo and link back to the department's website.

  <app-header
    :branding-image="{ src: 'my-logo-image.jpg'}"
    :branding-link="{ href: 'http://www.example.com '}"
  />

The branding-image accepts an object of <img> attributes.

{
  src: "my-logo-image.png",
  alt: "department logo"
  width: "200px"
}

The image width and height are not enforced. Use the image attributes width/height, or css styles to set it.

The branding-link accepts an object of <a> attributes.

{
  href: "http://phila.gov/my-department",
  target: "_blank"
}

If the branding-image is set, then a branding-link is also used. By default the branding-link is '/'

Fixed & Fluid

Makes the header non-sticky and fluid (content stretches to the length of the window).

  <app-header
    :is-sticky="false"
    :is-fluid="false"
  />

Most applications should use the default values

Mobile Navigation <slot>

  <app-header>
    <mobile-nav
      slot="mobile-nav"
      :links="myLinks"
    />
  </app-header>

See the Mobile Navigation component for more information.

Tabbed Navigation <slot>

  <app-header>
    <tabs-nav
      slot="tabs-nav"
      :links="myLinks"
    />
  </app-header>

See the Tabbed Navigation component for more information.

Dropdown Navigation <slot>

  <app-header>
    <dropdown-nav
      slot="dropdown-nav"
      :links="myLinks"
    />
  </app-header>

The positioning of the dropdown navigation depends on the presence of the tabbed navigation. If a tabbed navigation is present, then the dropdown is aligned with the tabs. If the tabs are not present, then the dropdown is aligned with the title. See the Dropdown Navigation component for more information.

Language Selector <slot>

  <app-header>
    <lang-selector
      slot="lang-selector-nav"
      :languages="myLanguages"
    />
  </app-header>

The positioning of the language selector depends on the presence of the tabbed navigation. If a tabbed navigation is present, then the language selector dropdown is aligned with the tabs. If the tabs are not present, then the dropdown is aligned with the title. See the Language Selector component for more information.

Live Examples

The application header is responsive, so its size will render smaller in the preview windows below, and some elements may be hidden. Click on the new window button/icon to view it on a larger window.

Basic application header

Header with branding image

Header with tabbed navigation

Header with dropdown navigation

Header with language selector

Header with mobile navigation

Header with all options and slots