#Dropdown Menu Columns

1 messages · Page 1 of 1 (latest)

strange lantern
#

how can i customize the dropdown menu so that it has two collumns where it keeps the same at the left side and at the right side it can look like on the reference dropdown menu?

NextUI_dropdown.png reference_dropdown.png
strange lantern
#

nobody?

#

👀

pastel bolt
#

I can help you.

strange lantern
#

Hi

#

You really can help me with that?

#

I've been waiting for somebody to help me with that since years now 😂 i'm so impatient

pastel bolt
#

Sure.

#

Can you show me your project?

#

are u there?

strange lantern
#

Sorry can i come back to you later ? I have an urgent thing to do i'll be back in a few hours

#

I'll show you what i have on my code later

brisk gorge
#

@strange lantern hey, you can use Popover combined with Tabs if you want.

strange lantern
#

hi

#

hi everybody

#

sorry for the absence

#

so i tried one solution from somebody that replied on the general tab #🌟-heroui-v2 message

#

but it's not what i'm looking for

strange lantern
strange lantern
# pastel bolt are u there?

i can't show you my entire project unfortunatelly but i'm sure we can figure a way to make you understand the problem and resolve it together

#

i have a nextjs-nextui project template to start

brisk gorge
strange lantern
#

yeah i found it and i don't think i can figure a way to make it with this by own, i saw on the website that has that dropdown reference that it uses headlessUI

brisk gorge
#

lemme try something here

#

hold on a sec

#

you want something like

#

@strange lantern

strange lantern
# brisk gorge

that's almost what i want, just the right side should be totally indepedant from what button you click on you understand?

#

or maybe i should make it dynamic 🤔

#

what's better?

brisk gorge
#

oh, got it

strange lantern
#

something static or dynamic?

brisk gorge
#

if static fits your needs, I think you should stick with it

# 
import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Tab,
  Tabs
} from '@nextui-org/react'
import { User } from 'lucide-react'

/** Only for testing purposes */
export const TabTitle = ({
  name,
  description
}: {
  name: string
  description: string
}) => {
  return (
    <div className="flex items-center gap-2">
      <User className="size-5" />
      <div className="flex flex-col gap-1">
        <span className="text-start">{name}</span>
        <span className="text-xs text-default-500">{description}</span>
      </div>
    </div>
  )
}

/** Only for testing purposes */
export const RightContent = ({
  children
}: {
  children: React.ReactNode
}) => {
  return <div className="p-4">{children}</div>
}

export const TestComponent = () => {
  const tabs = [
    { name: 'Tab 1', description: 'lorem ipsum dolor sit amet' },
    { name: 'Tab 2', description: 'lorem ipsum dolor sit amet' },
    { name: 'Tab 3', description: 'lorem ipsum dolor sit amet' }
  ]

  return (
    <div className="flex items-center justify-center min-h-screen">
      <Popover placement="bottom">
        <PopoverTrigger>
          <Button color="primary">Click here</Button>
        </PopoverTrigger>
        <PopoverContent className="flex items-start min-w-96">
          <div className="flex gap-2">
            <Tabs classNames={{ tab: 'h-max' }} isVertical>
              {tabs.map((tab) => (
                <Tab
                  key={tab.name}
                  title={
                    <TabTitle name={tab.name} description={tab.description} />
                  }
                />
              ))}
            </Tabs>
            <RightContent>A real nice content here.</RightContent>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  )
}
#

if you want to make dynamic, you just put the RightContent inside the <Tab>...</Tab> and remove the div wrapper

# 
import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Tab,
  Tabs
} from '@nextui-org/react'
import { User } from 'lucide-react'

/** Only for testing purposes */
export const TabTitle = ({
  name,
  description
}: {
  name: string
  description: string
}) => {
  return (
    <div className="flex items-center gap-2">
      <User className="size-5" />
      <div className="flex flex-col gap-1">
        <span className="text-start">{name}</span>
        <span className="text-xs text-default-500">{description}</span>
      </div>
    </div>
  )
}

/** Only for testing purposes */
export const TabContent = ({
  children
}: {
  children: React.ReactNode
}) => {
  return <div className="p-4">{children}</div>
}

export const TestComponent = () => {
  const tabs = [
    { name: 'Tab 1', description: 'lorem ipsum dolor sit amet' },
    { name: 'Tab 2', description: 'lorem ipsum dolor sit amet' },
    { name: 'Tab 3', description: 'lorem ipsum dolor sit amet' }
  ]

  return (
    <div className="flex items-center justify-center min-h-screen">
      <Popover placement="bottom">
        <PopoverTrigger>
          <Button color="primary">Click here</Button>
        </PopoverTrigger>
        <PopoverContent className="flex items-start min-w-96">
          <Tabs
            classNames={{
              tab: 'h-max'
            }}
            isVertical
          >
            {tabs.map((tab) => (
              <Tab
                key={tab.name}
                title={
                  <TabTitle name={tab.name} description={tab.description} />
                }
              >
                <TabContent>A nice content here {tab.name}</TabContent>
              </Tab>
            ))}
          </Tabs>
        </PopoverContent>
      </Popover>
    </div>
  )
}
``` like this
#

I think you can do the rest, right?

strange lantern
#

wait let me test it