@exmg/exm-navigation
Version:
76 lines (57 loc) • 3.5 kB
Markdown
# `<exm-navigation>` [](https://www.npmjs.com/package/@exmg/exm-navigation)
# @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
<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
```typescript
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 |