OddSite 4.0.0

Dropdowns

A flexible pattern for dropdown menus.

.has-dropdown

scss 
.has-dropdown {
  position: relative;
}

Apply relative positioning to establish the layout context of a dropdown.

[data-btn~='summary']

scss 
[data-btn~='summary'] {
  --marker-color: currentcolor;

  white-space: nowrap;

  [open] > & {
    @include config.z-index('dropdown');

    @include config.before('') {
      @include config.z-index('bump');

      cursor: default;
      display: block;
      inset: 0;
      position: fixed;
    }
  }
}

Generates a fixed overlay of the viewport when open. The overlay is part of the summary button, between the dropdown itself and the rest of the page, and acts as a click target to close the dropdown.

[data-dropdown]

scss 
[data-dropdown] {
  @include config.z-index('dropdown');

  background: var(--bg);
  border: thin solid var(--active);
  box-shadow: 0 0 var(--quarter-shim) var(--shadow);
  max-width: calc(100% - var(--page-margin) * 2);
  min-width: 14em;
  position: absolute;

  &[aria-expanded='false'] {
    display: none;
  }
}

The basic dropdown box, with a max-width of the available space.

[data-dropdown~='pad']

scss 
[data-dropdown~='pad'] {
  padding: var(--gutter);
}

Add default padding to dropdowns that don’t need full-width content.

Dropdowns can be aligned with keyword variants

[data-dropdown~='center']

scss 
[data-dropdown~='center'] {
  left: 50%;
  transform: translateX(-50%);
}

[data-dropdown~='ltr']

scss 
[data-dropdown~='ltr'] {
  left: 0;
}

[data-dropdown~='rtl']

scss 
[data-dropdown~='rtl'] {
  right: 0;
}