DropDown menu with UiShadCn and reactJs

Question

I'm having this problem where, from one point onwards, the data keeps passing off the screen. enter image description here I want items to scroll.

Code:

`<DropdownMenu>
        <DropdownMenuTrigger className="relative h-[43px] flex items-center justify-center scale-110">
          <Bell className="mr-2 h-4 w-4" />
          <span
            className="absolute top-0 right-0 mt-1 mr-1 text-[12px] bg-red-500 text-white w-4 h-4 rounded-full flex items-center justify-center"
          >
            {/* Ver quantas notificações tem */}
            {notificationsData ? notificationsData.length : 0}
          </span>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56" >
          <DropdownMenuLabel>Notificações</DropdownMenuLabel>

          <DropdownMenuSeparator />

          {/* Adicionar uma notificação para cada medicamento */}
          {notificationsData && notificationsData.length > 0 ? (
            notificationsData.map((item, index) => (
              <DropdownMenuGroup key={index}>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger className="flex items-center">
                    {item.medicineDaysSupplied <= 5 ? (
                      <XCircle className='mr-2 h-4 w-4 text-red-600' />

                    ) : (
                      <AlertTriangle className='mr-2 h-4 w-4 text-yellow-500' />
                    )}

                    <div>
                      {/* Nome do medicamento */}
                      {item.medicineNameAlert}
                      {/* Nome do hóspede */}
                      <h5 className='text-[12px]'>{item.guestNameAlert}</h5>
                    </div>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent>
                      <DropdownMenuItem>
                        <PersonStanding className="mr-2 h-4 w-4" />
                        <span>Ir para o hóspede</span>
                      </DropdownMenuItem>
                    </DropdownMenuSubContent>
                  </DropdownMenuPortal>
                  <DropdownMenuSeparator />
                </DropdownMenuSub>
              </DropdownMenuGroup>
            ))
          ) : (
            <DropdownMenuItem disabled>
              <span>Não há nada por aqui</span>
            </DropdownMenuItem>
          )}
        </DropdownMenuContent>
      </DropdownMenu>`

I want the items to scroll, and have a maximum height, i am using this component inside another parent component

Answer 1

You just need to add few tailwind classes:

<DropdownMenuContent className="w-56 h-96 overflow-y-auto">