@metismenu/angular

angular component for metismenu

Getting started

Install

Install with npm:

$ npm install @metismenu/angular

Install with yarn:

$ yarn add @metismenu/angular

Usage

Edit app.module.ts file

import { MetismenuAngularModule } from "@metismenu/angular";

// import
@NgModule({
  imports: [
    MetismenuAngularModule,
    ...
  ]
})

Edit angular.json file

"styles": [
  "./node_modules/metismenujs/dist/metismenujs.css",
  "src/styles.css"
]

Use metis-menu selector. It can be used with a valid html tag or just as <metis-menu> .

<ul metis-menu>
  <li><a href="">Item 1</a></li>
  <li>
    <a href="#" class="has-arrow">Menu 1</a>
    <ul>
      <li><a href="#"> Item 3 </a></li>
      <li><a href="#"> Item 4 </a></li>
    </ul>
  </li>
  <li>
    <a href="#" class="has-arrow"> Menu 2 </a>
    <ul>
      <li><a href=""> Item 5 </a></li>
      <li><a href=""> Item 6 </a></li>
      <li><a href=""> Item 7 </a></li>
      <li><a href=""> Item 8 </a></li>
    </ul>
  </li>
  <li><a href="">Item 2</a></li>
</ul>

OR

<metis-menu>
  <li><a href="">Item 1</a></li>
  <li>
    <a href="#" class="has-arrow">Menu 1</a>
    <ul>
      <li><a href="#"> Item 3 </a></li>
      <li><a href="#"> Item 4 </a></li>
    </ul>
  </li>
  <li>
    <a href="#" class="has-arrow"> Menu 2 </a>
    <ul>
      <li><a href=""> Item 5 </a></li>
      <li><a href=""> Item 6 </a></li>
      <li><a href=""> Item 7 </a></li>
      <li><a href=""> Item 8 </a></li>
    </ul>
  </li>
  <li><a href="">Item 2</a></li>
</metis-menu>

Properties

toggle

Type: string (true | false)

Default: true

For auto collapse support.

<ul metis-menu toggle="false">
...
</ul>

triggerElement

Type: css selector

Default: a

<div metis-menu triggerElement="h2">
...
</div>

parentTrigger

Type: css selector

Default: li

<p metis-menu parentTrigger="div">
...
</p>

subMenu

Type: css selector

Default: ul

<metis-menu parentTrigger="div">
...
</metis-menu>

Example Repo

https://github.com/onokumus/metismenu-angular-example

Demo

https://onokumus.com/metismenu-angular-example/

About

Related projects

• metismenu: A jQuery menu plugin | homepage
• metismenujs: MetisMenu with Vanilla-JS | homepage

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Author

Osman Nuri Okumus

• GitHub Profile
• Twitter Profile
• LinkedIn Profile

License

Copyright © 2020, Osman Nuri Okumus. Released under the MIT License.

This library was generated with Angular CLI version 10.0.2.