Nav

npm2.0.0

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.

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('open', () => (nav.expanded = true));
  nav.addEventListener('close', () => (nav.expanded = false));
  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 interaction="auto">
    <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 interaction="auto">
    <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
`open`
`close`

Properties

Name	Types	Description
`expanded`	`boolean`	determine if element is expanded
`expandable`	`boolean`	determine if the nav can be expanded
`i18n`		set default aria/i18n strings
`interaction`	`'auto'`	determine if element should auto manage expanded state

Attributes

Name	Types	Description
`expanded`	`boolean`	determine if element is expanded
`expandable`	`boolean`	determine if the nav can be expanded
`i18n`		set default aria/i18n strings
`interaction`	`'auto'`	determine if element should auto manage expanded state

CSS Properties

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

Slots

Name	Types	Description
`default`		content