Nav

npm1.8.3

The Navigation component that allows users to navigate between different sections or pages. The component should contain links to different sections or pages within the application. The links should be clearly labeled and easily distinguishable.

Example

item 1

item 2

item 3

code

<script type="module">
  import '@blueprintui/components/include/nav.js';
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/home.js';
</script>
<bp-nav expanded style="--height: 350px">
  <bp-nav-item>
    <bp-icon shape="home"></bp-icon>
    <a href="#">item 1</a>
  </bp-nav-item>
  <bp-nav-item selected>
    <bp-icon shape="home"></bp-icon>
    <a href="#">item 2</a>
  </bp-nav-item>
  <bp-nav-item>
    <bp-icon shape="home"></bp-icon>
    item 3
  </bp-nav-item>
</bp-nav>

Collapsed

item 1

item 2

item 3

code

<bp-nav expandable style="--height: 350px">
  <bp-nav-item>
    <bp-icon shape="home"></bp-icon>
    item 1
  </bp-nav-item>
  <bp-nav-item selected>
    <bp-icon shape="home"></bp-icon>
    item 2
  </bp-nav-item>
  <bp-nav-item>
    <bp-icon shape="home"></bp-icon>
    item 3
  </bp-nav-item>
</bp-nav>
<script type="module">
  import '@blueprintui/components/include/nav.js';
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/home.js';

  const nav = document.querySelector('bp-nav');
  const items = document.querySelectorAll('bp-nav-item');

  nav.addEventListener('change', () => (nav.expanded = !nav.expanded));
  nav.addEventListener('click', (e) => {
    if (e.target.tagName === 'BP-NAV-ITEM') {
      items.forEach((item) => (item.selected = false));
      e.target.selected = !e.target.selected;
    }
  });
</script>

Icon

item 1

item 2

item 3

code

<script type="module">
  import '@blueprintui/components/include/nav.js';
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/home.js';
</script>
<bp-nav expanded style="--height: 350px">
  <bp-nav-item>
    <bp-icon shape="home"></bp-icon>
    item 1
  </bp-nav-item>
  <bp-nav-item selected>
    <bp-icon shape="home"></bp-icon>
    item 2
  </bp-nav-item>
  <bp-nav-item>
    <bp-icon shape="home"></bp-icon>
    item 3
  </bp-nav-item>
</bp-nav>

Groups

item 1

group 1

group item 1

group item 2

group item 3

group 1

group item 1

group item 2

code

<script type="module">
  import '@blueprintui/components/include/nav.js';
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/home.js';
</script>
<bp-nav expanded style="--height: 350px">
  <bp-nav-item> <bp-icon shape="home"></bp-icon> item 1 </bp-nav-item>
  <bp-nav-group expanded>
    <bp-nav-item><bp-icon shape="home"></bp-icon> group 1</bp-nav-item>
    <bp-nav-item>group item 1</bp-nav-item>
    <bp-nav-item selected>group item 2</bp-nav-item>
    <bp-nav-item>group item 3</bp-nav-item>
  </bp-nav-group>
  <bp-nav-group>
    <bp-nav-item><bp-icon shape="home"></bp-icon> group 1</bp-nav-item>
    <bp-nav-item><bp-icon shape="home"></bp-icon> group item 1</bp-nav-item>
    <bp-nav-item><bp-icon shape="home"></bp-icon> group item 2</bp-nav-item>
  </bp-nav-group>
</bp-nav>

Install

NPM

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

CDN

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

Accessibility

The currently selected page should be highlighted in the navigation menu.
The component should be accessible to screen readers, with clear and descriptive labels for each link.
The links should be focusable and have a clear visual indication when focused.

bp-nav

Events

Name	Types	Description
`change`	`CustomEvent`

Properties

Name	Types	Description
`expanded`	`boolean`
`expandable`	`boolean`
`i18n`
`items`

Attributes

Name	Types	Description
`expanded`	`boolean`
`expandable`	`boolean`
`i18n`

CSS Properties

Name	Types	Description
`--background`
`--padding`
`--width`
`--height`
`--max-height`

Slots

Name	Types	Description
`default`		content