Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Dropdown

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Basic Usage

Advanced Usage

With IconButton

You can use Dropdown.Toggle with IconButton component, note that all props you provide to Dropdown.Toggle will get passed down to the IconButton.

Dropdown.Deprecated

with icon element

(Deprecated) basic usage

(Deprecated) menu items as elements

(Deprecated) with icon element

Theme Variables (SCSS)#

// Dropdowns
//
// Dropdown menu container and contents.


$dropdown-min-width:                18rem !default;
$dropdown-padding-x:                0 !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-font-size:                $font-size-base !default;
$dropdown-color:                    $body-color !default;
$dropdown-bg:                       $white !default;
$dropdown-border-color:             rgba($black, .15) !default;
$dropdown-border-radius:            $border-radius !default;
$dropdown-border-width:             $border-width !default;
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
$dropdown-divider-bg:               theme-color("gray", "background") !default;
$dropdown-divider-margin-y:         calc($spacer / 2) !default;
$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;


$dropdown-link-color:               theme-color("gray", "dark-text") !default;
$dropdown-link-hover-color:         darken(theme-color("gray", "dark-text"), 5%) !default;
$dropdown-link-hover-bg:            $light-300 !default;


$dropdown-link-active-color:        $component-active-color !default;
$dropdown-link-active-bg:           $component-active-bg !default;


$dropdown-link-disabled-color:      theme-color("gray", "light-text") !default;


$dropdown-item-padding-y:           .25rem !default;
$dropdown-item-padding-x:           1rem !default;


$dropdown-header-color:             theme-color("gray", "light-text") !default;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
Dropdown Props API
  • children node Required Required
DropdownItem Props API
  • type string Required
    Default'a'
  • children node Required
  • className string Required
    Defaultnull
DropdownMenu Props API
  • children node Required
DropdownButton Props API
  • children node Required
  • className string Required
    Default'btn-light'
DropdownToggle Props API
  • as elementType Required

    Specifies the base element.

    DefaultButton
  • bsPrefix string Required

    Overrides underlying component base CSS class name.

    Default'dropdown-toggle'
  • id string Required | number Required Required Required

    An html id attribute, necessary for assistive technologies, such as screen readers.

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)