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>