The side navigation bar contains items and menus.
Navigation items are added as <ma-side-nav-item>
elements and each one has a [routerLink]
property, just like
anchor tags. Items may be grouped together into menus. The item matching the
current route is automatically highlighted with the primary color.
<ma-side-nav> <ma-side-nav-header> <ma-logo></ma-logo> Ng2 Mod Admin </ma-side-nav-header> <ma-side-nav-item [routerLink]='["About"]'> <fa name='home' [fw]='true' size='lg'></fa> About </ma-side-nav-item> … <ma-side-nav-menu> <ma-side-nav-menu-header> <fa name='gears' [fw]='true' size='lg'></fa> Components </ma-side-nav-menu-header> <ma-side-nav-item [routerLink]='["Buttons"]'> Buttons </ma-side-nav-item> … </ma-side-nav-menu> … </ma-side-nav>
The side navigation may be fixed (doesn't move when you scroll the content) or static (scrolls with the content).
You may experiment with the side navigation using the controls above.
This card is here to take up space.
This card is very tall in order to demonstrate the difference between a fixed and static side navigation. Try scrolling up and down after toggling the "Fixed position" checkbox above.