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

Displays a vertical navigation menu with collapsible groups and icons.

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

Demonstrates navigation in collapsed state.

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

Shows navigation with icon-only display.

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

Demonstrates navigation with grouped items.

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`	Controls whether the navigation is expanded, showing all items and content
`expandable`	`boolean`	Determines if the navigation can be expanded or collapsed by the user
`i18n`		Provides internationalization strings for translated text content
`interaction`	`'auto'`	Controls whether the component automatically manages expanded state based on user interactions

Attributes

Name	Types	Description
`expanded`	`boolean`	Controls whether the navigation is expanded, showing all items and content
`expandable`	`boolean`	Determines if the navigation can be expanded or collapsed by the user
`i18n`		Provides internationalization strings for translated text content
`interaction`	`'auto'`	Controls whether the component automatically manages expanded state based on user interactions

CSS Properties

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

Slots

Name	Types	Description
`default`		content