import CodeRender from '../../CodeRender'

### Dropdown menu using <details> tag

<CodeRender code={`
<details class="dropdown mb-32">
  <summary class="m-1 btn">open or close</summary>
  <ul class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</details>

`} />
  
```html
<details class="dropdown mb-32">
  <summary class="m-1 btn">open or close</summary>
  <ul class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</details>

```
### Dropdown menu

<CodeRender code={`
<div>
  <div class="text-sm mb-4 text-center">Click outside to close</div>
  <div class="dropdown mb-32">
    <div tabindex="0" role="button" class="m-1 btn">Click to open</div>
    <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
      <li><button>Item 1</button></li>
      <li><button>Item 2</button></li>
    </ul>
  </div>
</div>

`} />
  
```html
<div>
  <div class="text-sm mb-4 text-center">Click outside to close</div>
  <div class="dropdown mb-32">
    <div tabindex="0" role="button" class="m-1 btn">Click to open</div>
    <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
      <li><button>Item 1</button></li>
      <li><button>Item 2</button></li>
    </ul>
  </div>
</div>

```
### Dropdown / aligns to end

<CodeRender code={`
<div class="dropdown dropdown-end mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-end mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown top

<CodeRender code={`
<div class="dropdown dropdown-top mt-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-top mt-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown top / aligns to end

<CodeRender code={`
<div class="dropdown dropdown-top dropdown-end mt-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-top dropdown-end mt-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown bottom

<CodeRender code={`
<div class="dropdown dropdown-bottom mb-32">
  <div tabindex="0" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-bottom mb-32">
  <div tabindex="0" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown bottom / aligns to end

<CodeRender code={`
<div class="dropdown dropdown-bottom dropdown-end mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-bottom dropdown-end mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown left

<CodeRender code={`
<div class="dropdown dropdown-left mb-16">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-left mb-16">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown left / aligns to end

<CodeRender code={`
<div class="dropdown dropdown-left dropdown-end mt-16">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-left dropdown-end mt-16">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown right

<CodeRender code={`
<div class="dropdown dropdown-right mb-16">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-right mb-16">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown right / aligns to end

<CodeRender code={`
<div class="dropdown dropdown-right dropdown-end mt-16">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-right dropdown-end mt-16">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Dropdown on hover

<CodeRender code={`
<div class="dropdown dropdown-hover mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Hover</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-hover mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Hover</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Force open

<CodeRender code={`
<div class="dropdown dropdown-open mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Button</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

`} />
  
```html
<div class="dropdown dropdown-open mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Button</div>
  <ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li><button>Item 1</button></li>
    <li><button>Item 2</button></li>
  </ul>
</div>

```
### Card as dropdown

<CodeRender code={`
<div class="dropdown mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <div
    tabindex="0"
    class="w-64 p-2 shadow card card-compact dropdown-content z-[1] bg-primary text-primary-content"
  >
    <div class="card-body">
      <h3 class="card-title">Card title!</h3>
      <p>you can use any element as a dropdown.</p>
    </div>
  </div>
</div>

`} />
  
```html
<div class="dropdown mb-32">
  <div tabindex="0" role="button" class="m-1 btn">Click</div>
  <div
    tabindex="0"
    class="w-64 p-2 shadow card card-compact dropdown-content z-[1] bg-primary text-primary-content"
  >
    <div class="card-body">
      <h3 class="card-title">Card title!</h3>
      <p>you can use any element as a dropdown.</p>
    </div>
  </div>
</div>

```
### Dropdown in navbar

<CodeRender code={`
<div class="navbar mb-40 bg-base-300 rounded-box w-full">
  <div class="flex-1 px-2 lg:flex-none"><button class="text-lg font-bold">IceStack</button></div>
  <div class="flex justify-end flex-1 px-2">
    <div class="flex items-stretch">
      <button class="btn btn-ghost rounded-btn">Button</button>
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost rounded-btn">Dropdown</div>
        <ul
          tabindex="0"
          class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 mt-4"
        >
          <li><button>Item 1</button></li>
          <li><button>Item 2</button></li>
        </ul>
      </div>
    </div>
  </div>
</div>

`} />
  
```html
<div class="navbar mb-40 bg-base-300 rounded-box w-full">
  <div class="flex-1 px-2 lg:flex-none"><button class="text-lg font-bold">IceStack</button></div>
  <div class="flex justify-end flex-1 px-2">
    <div class="flex items-stretch">
      <button class="btn btn-ghost rounded-btn">Button</button>
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost rounded-btn">Dropdown</div>
        <ul
          tabindex="0"
          class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 mt-4"
        >
          <li><button>Item 1</button></li>
          <li><button>Item 2</button></li>
        </ul>
      </div>
    </div>
  </div>
</div>

```
### Helper dropdown

<CodeRender code={`
<div class="mb-28 mt-6 flex gap-1 items-center">
  A normal text and a helper dropdown
  <div class="dropdown dropdown-end">
    <div tabindex="0" role="button" class="btn btn-circle btn-ghost btn-xs text-info">
      <svg
        tabindex="0"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        class="w-4 h-4 stroke-current"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ></path>
      </svg>
    </div>
    <div
      tabindex="0"
      class="shadow card compact dropdown-content z-[1] bg-base-100 rounded-box w-64"
    >
      <div tabindex="0" class="card-body">
        <h2 class="card-title">You needed more info?</h2>
        <p>Here is a description!</p>
      </div>
    </div>
  </div>
</div>

`} />
  
```html
<div class="mb-28 mt-6 flex gap-1 items-center">
  A normal text and a helper dropdown
  <div class="dropdown dropdown-end">
    <div tabindex="0" role="button" class="btn btn-circle btn-ghost btn-xs text-info">
      <svg
        tabindex="0"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        class="w-4 h-4 stroke-current"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ></path>
      </svg>
    </div>
    <div
      tabindex="0"
      class="shadow card compact dropdown-content z-[1] bg-base-100 rounded-box w-64"
    >
      <div tabindex="0" class="card-body">
        <h2 class="card-title">You needed more info?</h2>
        <p>Here is a description!</p>
      </div>
    </div>
  </div>
</div>

```   

    