@exmg/exm-navigation

Install

``bash
npm install @exmg/exm-navigation
`

Anatomy

This library contains following component:

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

Conceptual usage:

`html

My Title

Actions

Rail top

Rail bottom

${this.renderPage()}

`

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

API

$3

| 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 |

$3

| 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

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

$3

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