<exm-navigation>

@exmg/exm-navigation

Install

npm install @exmg/exm-navigation

Anatomy

This library contains following component:

1. Navigation (main component and fully composed navigation component)

Conceptual usage:

  <exm-navigation .items=${menuItems} .path=${['spaces']}>
    <!-- Slot for adding a title to the topbar. Topbar is only visible on mobile -->
    <section slot="topbar-title">My Title</section>
    <!-- Slot for adding actions to the right of the topbar. Topbar is only visible on mobile -->
    <section slot="topbar-actions">Actions</section>
    <!-- Slot for adding a logo in the top part of the rail. This is not visible on mobile -->
    <section slot="rail-top">Rail top</section>
    <!-- Slot for adding extra actions or other content to the bottom of the rail. This is not visible on mobile -->
    <section slot="rail-bottom">Rail bottom</section>
    <!-- The actual page content to display -->
    <section class="content">${this.renderPage()}</section>
  </exm-navigation>

Some of the components used in the navigation c an be used separately. Please check the code for implementation

API

Slots

| Name | Description | | ---------------- | ------------------------------------------------------------------------------------------------------- | | topbar-title | Slot for adding a title to the topbar. Topbar is only visible on mobile | | topbar-actions | Slot for adding actions to the right of the topbar. Topbar is only visible on mobile | | rail-top | Slot for adding a logo in the top part of the rail. This is not visible on mobile | | rail-bottom | Slot for adding extra actions or other content to the bottom of the rail. This is not visible on mobile | | default | The actual page content to display |

Properties/Attributes

| Name | Type | Default | Description | | -------------------- | ------------ | ------- | ------------------------------------------------------------------------------------------ | | items | MenuItem[] | [] | The list of menuitems to display in the navigation component | | path | string[] | [] | The current/initial path for the navigation | | disable-navigation | boolean | false | Disable navigation managed by the component. In that case you can use the event to trigger |

MenuItem

interface MenuItem {
  id: string;
  label: string;
  type?: 'separator' | 'default';
  path?: string;
  additionalPath?: Regexp;
  url?: string;
  icon?: string;
  items?: MenuItem[];
}

Events

| Name | Detail | Description | | ------------------- | ---------------- | ----------------------------------- | | navigation-change | ['one', 'two'] | The path selected in the navigation |