Skip to main content

Components

Dropdown

Dropdowns are used to display a list of user-selectable actions or options

banner-Dropdown
Square Icon

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Dropdowns are used to display a list of user-selectable actions or options** use of components don’t forget to add import legion-ui

import { Dropdown } from 'legion-ui';

Variant

Legion have a six variant of dropdown

Basic Dropdown

The default of dropdown is a basic dropdown

import React, { useState } from 'react';
import { Dropdown, Button, DynamicIcon, Anchor } from 'legion-ui';
import './style.css';
const Example = () => {
  const [isOpen, setOpen] = useState(false);
  const toogle = () => setOpen((prev) => !prev);
  const onClose = () => setOpen(false);


  return (
.example-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}


.example-menu-profile {
  text-align: left;
  line-height: 1.4;

Dropdown with Icon

You can modify the dropdown with icon

import React, { useState } from 'react';
import { Dropdown, Button, DynamicIcon, Anchor } from 'legion-ui';
import './style.css';


const Example = () => {
  const [isOpen, setOpen] = useState(false);
  const toogle = () => setOpen((prev) => !prev);
  const onClose = () => setOpen(false);


.example-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}


.example-menu-profile {
  text-align: left;
  line-height: 1.4;

Dropdown with Description

You can modify the dropdown with description

import React, { useState } from 'react';
import { Dropdown, Button, DynamicIcon, Anchor } from 'legion-ui';
import './style.scss';
const ExampleThree = () => {
  const [isOpen, setOpen] = useState(false);
  const toogle = () => setOpen((prev) => !prev);
  const onClose = () => setOpen(false);


  return (
.example-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}


.example-menu-profile {
  text-align: left;
  line-height: 1.4;

Dropdown with Checkbox

You can modify the dropdown with checkbox

import React, { useState } from 'react';
import { Dropdown, Button, DynamicIcon, Checkbox } from 'legion-ui';
import './style.scss';


const ExampleFour = () => {
  const [isOpen, setOpen] = useState(false);
  const toogle = () => setOpen((prev) => !prev);
  const onClose = () => setOpen(false);
  const clearSelected = () => setSelecdtedData([]);
.example-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}


.example-menu-profile {
  text-align: left;
  line-height: 1.4;

Dropdown with Multiple Categories

You can modify the dropdown with multiple categories

import React, { useState } from 'react'
import { Dropdown, Button, DynamicIcon, Checkbox } from 'legion-ui'


const ExampleFive = () => {
  const [isOpen, setOpen] = useState(false)
  const toogle = () => setOpen(prev => !prev)
  const onClose = () => setOpen(false)
  const clearSelected = () => setSelecdtedData([])

Dropdown with Toggle

You can modify the dropdown with toggle

import React, { useState } from 'react';
import { Dropdown, Avatar, DynamicIcon, Anchor, Button } from 'legion-ui';


const ExampleSix = () => {
  const [isOpen, setOpen] = useState(false);
  const toogle = () => setOpen((prev) => !prev);
  const onClose = () => setOpen(false);


  return (

Props

propertypropTyperequireddefaultdesc
borderRadiusnumber--Sets border dropdown radius
boxShadowstring-0 0 8px rgba(0, 0, 0, 0.125)Sets shadow on dropdown
childrenReact.ReactNodeyes-Pass all the necessary components here
isOpenbooleanyes-Status that makes the dropdown appear
onClose(value: boolean) ⇒ voidyes-Function to close the dropdown
positionleftcenterright-leftSets position of dropdown
triggerReact.ReactNodeyes-Pass all the necessary components here
spacenumber-40Space between trigger and box dropdown
style or classNameReact.CSSProperties--style customization