Angular Components
ClrCVerticalNav
Selector & Basic Usage
<clr-vertical-nav>
<!-- clrVerticalNavLink elements as needed-->
<!-- clr-nav-group components as needed -->
</clr-vertical-nav>
Bindings
Binding | Type | Options | Default | Description |
---|---|---|---|---|
[clrVerticalNavCollapsible] | input | true, false | false | When true, the component provides a button to toggle expanded/collapsed states. |
[(clrVerticalNavCollapsed)] | two-way | true, false | false | Two way binding to the collapsed/expanded state. |
ClrVerticalNavGroup
Selector & Basic Usage
<clr-vertical-nav>
<clr-vertical-nav-group>
<!-- clrVerticalNavLink elements as needed -->
</clr-vertical-nav-group>
<!-- additional clr-nav-group components as needed -->
<!-- additional clrVerticalNavLink elements as needed-->
</clr-vertical-nav>
ClrNavGroupChildren
Selector & Basic Usage
<clr-vertical-nav>
<clr-vertical-nav-group>
<cds-icon shape="user" clrVerticalNavIcon></cds-icon>
Users
<clr-vertical-nav-group-children>
<!-- clrVerticalNavLink elements as needed -->
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<!-- additional clr-nav-group components as needed -->
<!-- additional clrVerticalNavLink elements as needed-->
</clr-vertical-nav>
Angular Directives
ClrVerticalNavLink
Selector & Basic Usage
<clr-vertical-nav>
<a clrVerticalNavLink routerLink="./users" routerLinkActive="active">Users</a>
<div class="nav-divider"></div>
<a clrVerticalNavLink routerLink="./config" routerLinkActive="active">Configuration</a>
<a clrVerticalNavLink routerLink="./reports" routerLinkActive="active">Reports</a>
</clr-vertical-nav>
ClrVerticalNavIcon
Selector & Basic Usage
<clr-vertical-nav>
<a clrVerticalNavLink routerLink="./users/1">
<cds-icon shape="user" clrVerticalNavIcon></cds-icon>
User One
</a>
<a clrVerticalNavLink routerLink="./users/2">
<cds-icon shape="user" clrVerticalNavIcon></cds-icon>
User Two
</a>
</clr-vertical-nav>