css/dropdown.md at fe17ba05ac4372fb1d49edc08c8c036c2da54dce

primer/css

mirror of https://github.com/primer/css.git synced 2024-11-29 06:02:33 +03:00

* Add links to PVC

And break some bundles (e.g. navigation) apart

* Ignore some of the new pages

* Revert "Ignore some of the new pages"

This reverts commit 854802e7ca.

2022-12-16 09:06:08 +09:00

6.3 KiB

Raw Blame History

title	status	source	rails
Dropdown	Beta	https://github.com/primer/css/tree/main/src/dropdown	https://primer.style/view-components/components/alpha/dropdown

Dropdowns are lightweight 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.

Basic examples

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

Using a GitHub button:

<div style="margin-bottom: 100px">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      Dropdown
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

Using a button customized with additional utilities:

<div style="margin-bottom: 100px">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="color-fg-muted p-2 d-inline" aria-haspopup="true">
      Dropdown
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

Options

Alignment

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

<div style="margin-top: 100px">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      .dropdown-ne
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

<div style="margin-bottom: 100px">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      .dropdown-e
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

<div style="margin-bottom: 100px">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      .dropdown-se
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

<div style="margin-bottom: 100px" class="d-flex flex-justify-center">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      .dropdown-s
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

<div style="margin-bottom: 100px" class="d-flex flex-justify-end">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      .dropdown-sw
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

<div style="margin-bottom: 100px" class="d-flex flex-justify-end">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      .dropdown-w
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

Dividers

<div style="margin-bottom: 170px">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      Dropdown
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

Headers

<div style="margin-bottom: 126px">
  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      Dropdown
      <div class="dropdown-caret"></div>
    </summary>

    <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>
  </details>
</div>

6.3 KiB Raw Blame History