Ui.Dropdown

A component for showing the user hidden content.

On desktop resolution the content is shown in a drop down panel where as on mobile resolution it's shown in a modal.

Interactive Demo

You can play around with a Ui.Dropdown below using the controls.

Position
TopLeft
Open
Close on Outside Click
Match Width
Offset (5px)
Z-index (1)
<Ui.Dropdown
position={Ui.Position.TopLeft}
closeOnOutsideClick={false}
matchWidth={false}
open={true}
offset={5}
element={
<Ui.Button label="Click to Toggle"/>
}
content={
<Ui.Dropdown.Panel>
"Content"
</Ui.Dropdown.Panel>
}/>
Element

The element that acts as the initiator can be defined using the element property.

A simple div!
<>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="A Button!"/>}
open={true}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<div>"A simple div!"</div>}
open={true}
/>
</>
Content

The content can be defined using the content property.

<>
<Ui.Dropdown
content={<div>"A simple div!"</div>}
element={<Ui.Button label="Element"/>}
open={true}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"A dropdown panel!"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
open={true}
/>
</>
Open

The visible state of the panel can be controlled with the open property.

<>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
open={false}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
open={true}
/>
</>
Position

The position of the panel can be controlled with the position property.

<>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
position={Ui.Position.TopLeft}
open={true}
offset={5}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
position={Ui.Position.TopCenter}
open={true}
offset={5}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
position={Ui.Position.TopRight}
open={true}
offset={5}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
position={Ui.Position.BottomLeft}
open={true}
offset={5}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
position={Ui.Position.BottomCenter}
open={true}
offset={5}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
position={Ui.Position.BottomRight}
open={true}
offset={5}
/>
</>
Offset

The offset of the panel can be controlled with the offset property.

<>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
open={true}
offset={5}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
open={true}
offset={10}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
open={true}
offset={25}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
open={true}
offset={50}
/>
</>
Match Width

Whether or not the panel should match the width the element can be controlled with the matchWidth property.

<>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
matchWidth={false}
open={true}
/>
<Ui.Dropdown
content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>}
element={<Ui.Button label="Element"/>}
matchWidth={true}
open={true}
/>
</>
Close on Outside Click

Whether or not the panel should close when clicking outside of the panel can be controlled with the closeOnOutsideClick property.

Z-index

The z-index of the panel can be controlled with the zIndex property.

Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.
Content
Content
Content
A simple div!
A dropdown panel!
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content