Header

The header component is used to provide a consistent and recognizable top bar, typically containing a logo and main navigation.

Example

<script type="module">
  import '@blueprintui/components/include/header.js';
</script>

<bp-header>
  <bp-header-item>header</bp-header-item>
  <bp-header-item bp-layout="inline:end">item</bp-header-item>
  <bp-header-item>item</bp-header-item>
  <bp-header-item><a href="#">link</a></bp-header-item>
</bp-header>

Install

NPM

// npm package
import '@blueprintui/components/include/header.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/header.js/+esm';
</script>

Accessibility

• The header logo image should have alternative text for screen readers.
• The main navigation should be keyboard accessible, allowing users to navigate through the items using the tab key and activating them with the enter or space key.

bp-header

Properties

CSS Properties

Slots