---
title: Menu (Dropdown)
---

<script>
  import { Menu, Modal } from 'slender-ui'
  import { ComponentContainer, VariantSelector, ColorSelector } from '$lib'

  let color

  let variant
</script>

For all the extra options you need to implement after the project is finished.

<ComponentContainer>
  <div class="relative">
  <Menu.Button label="Hello" iconRight="feather.chevron-down"  {color} {variant} for="slender-menu" />

<Menu.Body {color} {variant} id="slender-menu">
<Menu.Item iconLeft="feather.calendar" loading>An icon</Menu.Item>
<Menu.Item href="https://pointerpointer.com" target="\_blank">
This is a link
</Menu.Item>
<Menu.Item openButton for="menu-modal">
A modal
</Menu.Item>
<Modal.Body id="menu-modal">

  <p>Hello :)</p>
<Modal.CloseButton variant="soft" class="w-full">Close</Modal.CloseButton>

</Modal.Body>

</Menu.Body>

</div>

  <div slot="code">

```svelte
<script>
  import { Menu, Modal } from 'slender-ui'
</script>

<Menu.Button label="Hello" iconRight="feather.chevron-down" color="primary" for="slender-menu" />

<Menu.Body color="primary" id="slender-menu">
  <Menu.Item iconLeft="feather.calendar">An icon</Menu.Item>
  <Menu.Item href="https://pointerpointer.com" target="_blank">This is a link</Menu.Item>
  <Menu.Item openButton for="menu-modal">A modal</Menu.Item>

  <Modal.Body id="menu-modal">
    <p>Hello :)</p>

    <Modal.CloseButton variant="soft" class="w-full">Close</Modal.CloseButton>
  </Modal.Body>
</Menu.Body>
```

  </div>

</ComponentContainer>

<div class="not-prose relative flex mt-3 space-x-6">
  <ColorSelector bind:color />

  <VariantSelector bind:variant />
</div>