Dropdown

Component

Storybook

Figma Demo

Guidelines

Variations

• The basic dropdown leverages the base size static container with 16px padding and a shadow.
• Dropdown menus have a minimum width of 224px but don’t have a set size at the base level.
• Specific instances of the dropdown may have maximum width/heights as needed for their specific use case.

Usage

Use dropdowns to reveal additional contextual content to users. Current examples include the location chooser and the notifications dropdown.

Best Practices

• Don’t use dropdowns to make selections within a form when a select field will suffice.

Content

• Content within a dropdown menu should be left-aligned.

Component Specs

API

Props

• activeUrl: string (default: '')
  URL of the active link.

• activeClass: string (default: '')
  Class name for the active link.

• as: 'div' or 'ul' (default: 'div')
  HTML tag to render the dropdown as.

• containerClass: string (default: '')
  Class name for the container.

• contentClass: string (default: '')
  Class name for the content.

• gap: Spacing (default: '16')
  Gap between items.

• handleOpen: () => void
  Function to call when the dropdown is opened.

• handleClose: () => void
  Function to call when the dropdown is closed.

• open: boolean (default: false)
  Open the dropdown by default.

• placement: Placement (default: 'bottom-start')
  Placement of the dropdown.

Slots

• header: Header of the dropdown.
• default: Content of the dropdown.
• footer: Footer of the dropdown.

Example

<script>
	import { Dropdown } from '@getprovi/craft-svelte';
</script>

<button>Dropdown</button>
<Dropdown> content </Dropdown>

Types

interface Props
	extends Omit<ComponentProps<Popover>, 'action'>,
		Omit<FloatingProps, 'activeContent' | 'offset'> {
	activeUrl?: string;
	as?: 'div' | 'ul';
	activeClass?: string;
	containerClass?: string | undefined;
	contentClass?: string | undefined;
	gap?: Spacing;
	handleOpen?: () => void;
	handleClose?: () => void;
	open?: boolean;
	placement?: Placement;
}

type Placement =
	| 'top'
	| 'right'
	| 'bottom'
	| 'left'
	| 'top-start'
	| 'top-end'
	| 'right-start'
	| 'right-end'
	| 'bottom-start'
	| 'bottom-end'
	| 'left-start'
	| 'left-end';