Primer CSS dropdown

This repository is a module of the full primer-css repository.

Install

This repository is distributed with npm. After installing npm, you can install primer-dropdown with this command.

$ npm install --save primer-dropdown

Usage

The source files included are written in Sass (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "primer-dropdown/index.scss";

You can also import specific portions of the module by importing those partials from the /lib/ folder. Make sure you import any requirements along with the modules.

Build

For a compiled css version of this module, a npm script is included that will output a css version to build/build.css The built css file is also included in the npm package.

$ npm run build

Documentation

Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.

{:toc}

Basic examples

Dropdowns should be trigged by a <button>. Each dropdown menu requires a directional class, much like our tooltips.

Using a GitHub button:

<div class="dropdown js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    Dropdown
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-se">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </div>
</div>

Using a button customized with additional utilities:

<div class="dropdown js-menu-container js-select-menu">
  <button class="btn-link no-underline text-gray p-2 dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    Dropdown
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-se">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </div>
</div>

Options

Alignment

Align the direction of dropdown menus and their arrows with modifier classes.

<div class="dropdown js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    .dropdown-ne
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-ne">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </div>
</div>

<div class="dropdown float-right js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    .dropdown-e
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-e">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </div>
</div>

<div class="dropdown js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    .dropdown-se
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-se">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </div>
</div>

<div class="dropdown d-inline-block mx-auto js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    .dropdown-s
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-s">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </div>
</div>

<div class="dropdown float-right js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    .dropdown-sw
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-sw">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </div>
</div>

<div class="dropdown js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    .dropdown-w
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-w">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </div>
</div>

Dividers

<div class="dropdown js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    Dropdown
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-se">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li class="dropdown-divider" role="separator"></li>
      <li><a class="dropdown-item" href="#url">Another item</a></li>
      <li><a class="dropdown-item" href="#url">One more</a></li>
    </ul>
  </div>
</div>

Headers

<div class="dropdown js-menu-container js-select-menu">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    Dropdown
    <div class="dropdown-caret"></div>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <div class="dropdown-menu dropdown-menu-se">
      <div class="dropdown-header">
        Dropdown header
      </div>
      <ul>
        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      </ul>
    </div>
  </div>
</div>

No overflow

Use dropdown-menu-no-overflow modifier class to set the width of the dropdown to auto and prevent hidden overflows on item contents and text.

<div class="select-all-dropdown dropdown js-menu-container js-bulk-actions float-left js-transitionable">
  <button class="btn btn-sm mr-3 js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    1 member selected…
    <span class="dropdown-caret"></span>
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-no-overflow dropdown-menu-se">
      <a href="#url" class="dropdown-item js-menu-close">
        Change role...
      </a>
      <a href="#url" class="dropdown-item menu-item-danger js-menu-close">
        Remove from team
      </a>
    </ul>
  </div>
</div>

Sign out button

Use <button class="dropdown-item dropdown-signout"> to reset button styles and display it as a link.

<div class="dropdown js-menu-container float-right position-relative">
  <button class="btn dropdown-toggle js-menu-target" type="button" aria-expanded="false" aria-haspopup="true">
    <img alt="@shawnbot" class="avatar" src="https://avatars0.githubusercontent.com/u/113896?v=4&amp;s=40" height="20" width="20">
  </button>

  <div class="dropdown-menu-content js-menu-content">
    <ul class="dropdown-menu dropdown-menu-sw">
      <li class="dropdown-header header-nav-current-user css-truncate">
      Signed in as <strong class="css-truncate-target">shawnbot</strong>
      </li>
      <li class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#url">Your profile</a></li>
      <li><a class="dropdown-item" href="#url">Your stars</a></li>
      <li><a class="dropdown-item" href="#url">Your Gists</a></li>
      <li class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#url">Help</a></li>
      <li><a class="dropdown-item" href="#url">Settings</a></li>
      <li>
        <form class="m-0" accept-charset="UTF-8" action="#url" class="logout-form" method="post">
          <button type="submit" class="dropdown-item dropdown-signout">
          Sign out
          </button>
        </form>
      </li>
    </ul>
  </div>
</div>

License

MIT © GitHub

Current Tags

0.1.0 ... latest (9 years ago)
0.2.0-alpha.ac1fba57 ... pr (8 years ago)
0.1.0-rc.21 ... rc (8 years ago)

117 Versions

0.2.0-alpha.ac1fba57 ... 8 years ago
0.2.0-alpha.47b50016 ... 8 years ago
0.2.0-alpha.38d51a03 ... 8 years ago
0.2.0-alpha.4d6b10db ... 8 years ago
0.1.0-rc.21 ... 8 years ago
0.2.0-alpha.4d9eeeac ... 8 years ago
0.2.0-alpha.8fc77c51 ... 8 years ago
0.2.0-alpha.00b2b0b0 ... 8 years ago
0.2.0-alpha.c046393a ... 8 years ago
0.2.0-alpha.29cee408 ... 8 years ago
0.2.0-alpha.eda81df5 ... 8 years ago
0.1.0-rc.20 ... 8 years ago
0.2.0-alpha.d313ee6b ... 8 years ago
0.2.0-alpha.4e208a0b ... 8 years ago
0.1.0-rc.19 ... 8 years ago
0.1.0-rc.18 ... 8 years ago
0.1.0-rc.17 ... 8 years ago
0.1.0-rc.16 ... 8 years ago
0.1.0-rc.15 ... 8 years ago
0.1.0-rc.14 ... 8 years ago
0.1.0-rc.13 ... 8 years ago
0.1.0-rc.3 ... 8 years ago
0.1.0-rc.2 ... 8 years ago
0.1.0-rc.1 ... 8 years ago
0.1.0-rc.0 ... 8 years ago
0.2.0-alpha.855d6dc1 ... 8 years ago
0.2.0-alpha.50e3e38c ... 8 years ago
0.2.0-alpha.f56e0e8f ... 8 years ago
0.2.0-alpha.57ee1db2 ... 8 years ago
0.2.0-alpha.0c02d6f5 ... 8 years ago
0.2.0-alpha.2196529c ... 8 years ago
0.1.0-rc.12 ... 8 years ago
0.1.0-rc.11 ... 8 years ago
0.2.0-alpha.923aac60 ... 8 years ago
0.1.0-rc.10 ... 8 years ago
0.1.0-rc.9 ... 8 years ago
0.2.0-alpha.96589fef ... 9 years ago
0.2.0-alpha.fc0632f6 ... 9 years ago
0.2.0-alpha.5b3f9c50 ... 9 years ago
0.2.0-alpha.acf55e92 ... 9 years ago
0.2.0-alpha.a13e6f94 ... 9 years ago
0.2.0-alpha.cd9db871 ... 9 years ago
0.2.0-alpha.9a3ed1d6 ... 9 years ago
0.2.0-alpha.84ebbc83 ... 9 years ago
0.2.0-alpha.a496cb5a ... 9 years ago
0.2.0-alpha.1ced14b8 ... 9 years ago
0.2.0-alpha.467f3674 ... 9 years ago
0.1.0-rc.8 ... 9 years ago
0.1.0-rc.7 ... 9 years ago
0.2.0-alpha.02d19bc1 ... 9 years ago
0.1.0-rc.6 ... 9 years ago
0.2.0-alpha.c4adcad2 ... 9 years ago
0.2.0-alpha.0b69014a ... 9 years ago
0.2.0-alpha.624e39eb ... 9 years ago
0.2.0-alpha.ff961b66 ... 9 years ago
0.2.0-alpha.ac917ffe ... 9 years ago
0.2.0-alpha.9009c792 ... 9 years ago
0.2.0-alpha.eb118ad7 ... 9 years ago
0.2.0-alpha.971dd13f ... 9 years ago
0.1.0 ... 9 years ago
0.2.0-alpha.65deba26 ... 9 years ago
0.1.0-rc.5 ... 9 years ago
0.2.0-alpha.98dd1f8b ... 9 years ago
0.2.0-alpha.e4440c27 ... 9 years ago
0.2.0-alpha.05244e6c ... 9 years ago
0.2.0-alpha.e92be9a9 ... 9 years ago
0.2.0-alpha.b0c397aa ... 9 years ago
0.2.0-alpha.c202630b ... 9 years ago
0.2.0-alpha.65fc2d56 ... 9 years ago
0.2.0-alpha.b5261c5a ... 9 years ago
0.2.0-alpha.18f330dd ... 9 years ago
0.2.0-alpha.b1b0f36a ... 9 years ago
0.2.0-alpha.d7ecafb7 ... 9 years ago
0.2.0-alpha.1e209b68 ... 9 years ago
0.2.0-alpha.99e791d1 ... 9 years ago
0.2.0-alpha.91b12b7f ... 9 years ago
0.2.0-alpha.b94a0894 ... 9 years ago
0.2.0-alpha.6ae842b4 ... 9 years ago
0.2.0-alpha.a92491ae ... 9 years ago
0.2.0-alpha.004083cf ... 9 years ago
0.2.0-alpha.a79aaac4 ... 9 years ago
0.2.0-alpha.5cf0e083 ... 9 years ago
0.2.0-alpha.8c9d96b7 ... 9 years ago
0.2.0-alpha.1c0fe35c ... 9 years ago
0.2.0-alpha.c4a2e1f5 ... 9 years ago
0.2.0-alpha.7cc2985b ... 9 years ago
0.2.0-alpha.3f685417 ... 9 years ago
0.2.0-alpha.ff49bb35 ... 9 years ago
0.2.0-alpha.1f8eed47 ... 9 years ago
0.2.0-alpha.cef502ae ... 9 years ago
0.2.0-alpha.74e40479 ... 9 years ago
0.2.0-alpha.6cff0edc ... 9 years ago
0.2.0-alpha.4e20437f ... 9 years ago
0.2.0-alpha.a0416d0c ... 9 years ago
0.2.0-alpha.495b352f ... 9 years ago
0.2.0-alpha.3805ebb6 ... 9 years ago
0.2.0-alpha.00ff9fdf ... 9 years ago
0.2.0-alpha.68a47d07 ... 9 years ago
0.2.0-alpha.68cefb21 ... 9 years ago
0.2.0-alpha.1eb7bceb ... 9 years ago
0.2.0-alpha.2b4fde00 ... 9 years ago
0.2.0-alpha.10ecf0bd ... 9 years ago
0.2.0-alpha.620b6ab4 ... 9 years ago
0.2.0-alpha.7e6208ed ... 9 years ago
0.2.0-alpha.db62cc5a ... 9 years ago
0.2.0-alpha.196d0ee8 ... 9 years ago
0.2.0-alpha.58e5748b ... 9 years ago
0.2.0-alpha.662e34a7 ... 9 years ago
0.1.0-rc.4 ... 9 years ago
0.2.0-alpha.d7669ef0 ... 9 years ago
0.2.0-alpha.3f6fbeb8 ... 9 years ago
1.1.0-alpha.670dd75f ... 9 years ago
1.1.0-alpha.2e955279 ... 9 years ago
1.1.0-alpha.deecf9fc ... 9 years ago
1.1.0-alpha.7acfa286 ... 9 years ago
1.1.0-alpha.c3b708a8 ... 9 years ago
1.1.0-alpha.1dd7c0fc ... 9 years ago