Angular Material Component To Make Sidenav Menus

Angular Material Sidemenu is a package to create navigation lists with ngx materials. This follows all design guidelines provided by Google Material spec.

angular material sidebar menu with submenu example, angular material drawer, angular material sidenav example, angular material sidenav right side

angular-material-sidenav

How to use it:

Installation:

npm install ng-material-sidemenu
bower install angular-material-sidemenu

1. Include the text program files and CSS files in your HTML and add ngMaterialSidemenu in your module.

<link rel="stylesheet" href="path/to/angular-material-sidemenu.css">
<script src="path/to/angular-material-sidemenu.js"></script>

2. To use symbols with Ligatures, you should include material codes reference:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

3. After that you can add the following coding:

<md-sidemenu>
  <md-sidemenu-group>
    <md-subheader class="md-no-sticky">Caption</md-subheader>

    <md-sidemenu-content collapse-other="true" md-icon="home" md-heading="Menu 1" md-arrow="true">
      <md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
      <md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
      <md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
    </md-sidemenu-content>

    <md-sidemenu-content md-heading="Menu 2" md-arrow="true" on-hover="true">
      <md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
      <md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>

      <md-sidemenu-content md-heading="Menu 2" md-arrow="true">
        <md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
        <md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
        <md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
      </md-sidemenu-content>
    </md-sidemenu-content>

  </md-sidemenu-group>

  <md-sidemenu-group>
    <md-divider></md-divider>

    <md-subheader class="md-no-sticky">Caption</md-subheader>

    <md-sidemenu-button href="#">Menu 4</md-sidemenu-button>
  </md-sidemenu-group>
</md-sidemenu>

Components

  • <md-sidemenu> Is the main directive to hold all navigation items.

  • <md-sidemenu-group> Is needed to create groups of content.

  • <md-sidemenu-content> Define the collapsible navigation element and there are some attributes to setup. The following attributes are available:

  • collapse-other – You can use it to collapse all other elements.
  • on-hover – You can open menu content on hover.
  • md-icon – You can use font icons
  • md-svg-icon – To use external SVG icons
  • md-heading – The title of the section
  • md-arrow – An optional boolean to show an indicator arrow
  • <md-sidemenu-button> Add the buttons inside the navigation. The following attributes are available:
  • href – The href for the button
  • ui-sref – The UI-router alternative
  • ui-sref-active – The highlight class to use with ui-router
  • target – The link target attribute

angular material sidemenu component plugin/github


See Demo And Download

Developer Name: xandor-io

Official Website: Click Here

Share

You may also like...

Leave a Reply

Your email address will not be published.