lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

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 1item 2item 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 1item 2item 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 1group 1group item 1group item 2group item 3group 1group item 1group 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

NameTypesDescription
open
close

Properties

NameTypesDescription
accessordetermine if element should auto manage expanded state
expandedboolean
expandableboolean
i18n
interaction'auto'

Attributes

NameTypesDescription
accessordetermine if element should auto manage expanded state

CSS Properties

NameTypesDescription
--background
--padding
--width
--height
--max-height

Slots

NameTypesDescription
defaultcontent