Clarity: Document how to use dropdown in header-nav

[JohannesRudolph]

Select one ... (check one with "x")

[x] bug
[x] feature request
[ ] enhancement

Expected behavior

Documentation should include an example for how to correctly use a dropdown with a text label in the navbar.

Actual behavior

Consider the following code:

<clr-main-container>
  <clr-header>
    <div class="branding">
      <a routerLink="/home" class="nav-link">
        <span class="clr-icon clr-clarity-logo"></span>
        <span class="title">Logo</span>
      </a>
    </div>

    <div class="header-nav">
      <clr-dropdown clrMenuPosition="bottom-right">
        <a clrDropdownToggle class="nav-link" id="changeProject">
          <span class="nav-text">{{currentProject.name}}</span>
          <clr-icon shape="caret" class="icon-orient-down"></clr-icon>
        </a>
        <div class="dropdown-menu">
          <a clrDropdownItem *ngFor="let p of projects" [routerLink]="['p', p.tag]">{{p.name}}</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item disabled" href="#">All</a>
        </div>
      </clr-dropdown>
...

This positions the caret in the center of the nav-link like so:

I can fix this using the following hack/workaround:

.dropdown .dropdown-toggle:not(.btn) clr-icon[shape="caret"] {
  right: 0;
  left: initial;
}

Which then looks like this

I'm either doing something wrong OR this is a bug in clarity.

Reproduction of behavior

See above

Environment details

• Angular version: 2.2.X

• Clarity version: 0.7

• OS and version: OS X el Capitan

• Browser: [Chrome 54, others likely affected as well]

[adityarb88]

@JohannesRudolph: Clarity does not recommend using dropdowns in the .header-nav section of the header. Clarity supports 3 levels of navigation. If you want to add another level of navigation to your application, we recommend you consider using the Sub Navigation or the Sidenav. We have 2 sections on our docs which explain this in more detail: https://vmware.github.io/clarity/documentation/app-layout
https://vmware.github.io/clarity/documentation/navigation

You can however add a dropdown to the .header-actions area of the header. I will document how to add a dropdown on that section ASAP.

cc: @yenmade, @jaffoneh

[sivaah]

@adityarb88 , Using text as dropdown toggle in .header-action is not documented
https://vmware.github.io/clarity/documentation/header

<clr-dropdown [clrMenuPosition]="'bottom-right'" [clrCloseMenuOnItemClick]="true">
    <button class="btn btn-link" clrDropdownToggle>
        Dropdown
        <clr-icon shape="caret" class="icon-orient-down"></clr-icon>
    </button>
    <div class="dropdown-menu">
    ...
    </div>
</clr-dropdown>

Example shows icon as dropdown toggle in the .header-action.

Adding text as dropdown toggle looks like this

Actual behaviour

Expected behaviour

[adityarb88]

Hi @sivaah. Thanks for reporting this. Adding this to my TODO. Will get this resolved ASAP.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.