• Components
  • Dropdown

Dropdown 

@!jrmc.dropdown({
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown aligns to end 

@!jrmc.dropdown({
  class: 'dropdown-end',
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-end">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown top 

@!jrmc.dropdown({
  class: ['dropdown-top', 'mt-20'],
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-top mt-20">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown top aligns to end 

@!jrmc.dropdown({
  class: ['dropdown-top', 'dropdown-end', 'mt-20'],
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-top dropdown-end mt-20">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown bottom 

@!jrmc.dropdown({
  class: 'dropdown-bottom',
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-bottom">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown bottom aligns to end 

@!jrmc.dropdown({
  class: ['dropdown-bottom', 'dropdown-end'],
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-bottom dropdown-end">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown left 

@!jrmc.dropdown({
  class: 'dropdown-left',
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-left">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown left aligns to end 

@!jrmc.dropdown({
  class: ['dropdown-left', 'dropdown-end', 'mt-20'],
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-left dropdown-end mt-20">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown right 

@!jrmc.dropdown({
  class: 'dropdown-right',
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-right">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown right aligns to end 

@!jrmc.dropdown({
  class: ['dropdown-right', 'dropdown-end', 'mt-20'],
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-right dropdown-end mt-20">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown force open 

@!jrmc.dropdown({
  class: 'dropdown-open',
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-open">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown hover 

@!jrmc.dropdown({
  class: 'dropdown-hover',
  text: 'dropdown',
  items: [
    { text: 'item1', href: '#' },
    { text: 'item2', href: '#' },
  ]
})
<div class="dropdown dropdown-hover">
<label
  tabindex="0" 
  class="btn m-1">dropdown</label>
    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
    </ul></div>

Dropdown card

Card title

you can use any element as a dropdown.

@jrmc.dropdown({ text: 'dropdown card' })
  @jrmc.card({ class: 'card-compact dropdown-content w-64 p-2 shadow bg-primary text-primary-content' })
    @jrmc.card.body()
      @!jrmc.card.title({ as: 'h3', text: 'Card title' })
      <p>you can use any element as a dropdown.</p>
    @end
  @end
@end
<div class="dropdown">
<label
  tabindex="0" 
  class="btn m-1">dropdown card</label>
    <div class="card card-compact dropdown-content w-64 p-2 shadow 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 compact

A normal text and a helper dropdown

Card title

you can use any element as a dropdown.

A normal text and a helper dropdown
@jrmc.dropdown({ class: 'dropdown-end' })
  @slot('button')
    @jrmc.button.label({ class: 'btn-ghost btn-circle btn-xs text-info' })
      <svg 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>
    @end
  @end
  @jrmc.card({ class: 'card-compact dropdown-content shadow bg-base-100 rounded-box w-64' })
    @jrmc.card.body()
      @!jrmc.card.title({ as: 'h3', text: 'Card title' })
      <p>you can use any element as a dropdown.</p>
    @end
  @end
@end
A normal text and a helper dropdown<div class="dropdown dropdown-end">    <label
  tabindex="0" 
  class="btn btn-ghost btn-circle btn-xs text-info">      <svg 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></label>
    <div class="card card-compact dropdown-content shadow bg-base-100 rounded-box w-64" >
  
  <div class="card-body">
  <h3 class="card-title">Card title</h3>
      <p>you can use any element as a dropdown.</p>
</div>
  
</div></div>