Dropdown

Enhance user selections with Bramble UI's dropdown component. Create interactive and efficient web interfaces with modern dropdown functionality.

Usage

import {Dropdown} from '@/ui'

const data = [
	{
		href: '#',
		label: 'Group Link',
		links: [
			{
				href: '#',
				label: 'Sub Link 1',
				links: [
					{
						href: '#',
						label: 'Sub sub link 1',
					},
					{
						href: '#',
						label: 'Sub sub link 2',
					},
				],
			},
			{
				href: '#',
				label: 'Sub Link 2',
			},
			{
				href: '#',
				label: 'Sub Link 3',
			},
		],
	},
]
                    
<Dropdown links={data} />

Default

Styled

<Dropdown
	className='btn pill dark gap-4 text-light'
	button='bg-secondary icon circle ms-2'
	size='lg'
	...
/>

RTL

<div dir='rtl'>
	<Dropdown links={data} />
</div>