Выпадающие списки

dropdown
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно создавать выпдающие списки

Описание

Выпадающие списки позволяют организовать в группу список ссылок (или кнопок) вызываемых нажатием на кнопку.

Выпадающий список на основе тега <button>

<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white focus:block+hidden" aria-haspopup="true" aria-expanded="false">
        Основная кнопка
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1" aria-labelledby="dropdownMenuButton">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие - другое</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
    </div>
</div>

Выпадающий список на основе тега <a>

Вы можете использовать для вызывающей список кнопки тег <a>. В этом случае используется кнопка созданная на основе ссылки.

<div class="relative inline-flex">
    <a class="inline-flex items-cross-center radius-2 underline-none cursor-pointer wrap-none transition focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white" href="javascript:void(0)" id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false">
        Основная ссылка
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </a>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1" aria-labelledby="dropdownMenuLink">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
    </div>
</div>

Оформление выпадающего списка

Для офомрления выпадающего списка используются модификаторы кнопок.

<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-gray-5 border-gray-5 color-white hover:bg-gray-6 hover:b-gray-6 hover:c-white"
        type="button" aria-haspopup="true" aria-expanded="false">
        По умолчанию
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-main border-main color-white hover:bg-opacity-3 hover:bg-gray-3"
        aria-haspopup="true" aria-expanded="false" type="button">
        Основная
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-gray-7 border-gray-7 color-white hover:bg-gray-8 hover:b-gray-8 hover:c-white"
        type="button" aria-haspopup="true" aria-expanded="false">
        Вторичная
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-success border-success color-white color-main hover:bg-green-2"
        type="button" aria-haspopup="true" aria-expanded="false">
        Успех
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-info border-info color-main hover:bg-blue-2"
        type="button" aria-haspopup="true" aria-expanded="false">
        Информация
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-warning border-warning color-white hover:bg-yellow-2"
        type="button" aria-haspopup="true" aria-expanded="false">
        Предупреждение
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-danger border-danger color-white hover:bg-red-2"
        type="button" aria-haspopup="true" aria-expanded="false">
        Опасность
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>

Выпадающий список с разделителем

Вы можете разделить кнопку выпадающего списка на две.

<div class="relative inline-flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-main border-main color-white hover:bg-opacity-3 hover:bg-gray-3">
        Основная
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-main border-main color-white hover:bg-opacity-3 hover:bg-gray-3" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
        <svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="ww-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-gray-7 border-gray-7 color-white hover:bg-gray-8 hover:b-gray-8 hover:c-white">
        Вторичная
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-gray-7 border-gray-7 color-white hover:bg-gray-8 hover:b-gray-8 hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
        <svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="ww-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-success border-success color-white color-main hover:bg-green-2">
        Успех
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-success border-success color-white color-main hover:bg-green-2" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
        <svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="ww-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-info border-info color-main hover:bg-blue-2">
        Информация
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-info border-info color-main hover:bg-blue-2" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
        <svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="ww-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-warning border-warning color-white hover:bg-yellow-2">
        Предупреждение
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-warning border-warning color-white hover:bg-yellow-2" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
        <svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="ww-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-danger border-danger color-white hover:bg-red-2">
        Опасность
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-danger border-danger color-white hover:bg-red-2" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
        <svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="ww-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>

Выпадающие списки разных размеров

<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-top-2 p-bottom-2 p-right-3 p-left-3 text-2 string-1 bg-red-6 hover:bg-red-3 color-white hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
        Большая кнопка
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>			</button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-top-2 p-bottom-2 p-right-3 p-left-3 text-2 string-1 bg-red-6 hover:bg-red-3 color-white hover:c-white">
        Большая разделительная кнопка
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-top-2 p-bottom-2 p-right-3 p-left-3 text-2 string-1 bg-red-6 hover:bg-red-3 color-white hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
        <svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-top-1 p-bottom-1 p-right-2 p-left-2 text-1/2 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
        Маленькая кнопка
        <svg class="w-b0 fill-current m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
	</button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full left-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative inline-flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-top-1 p-bottom-1 p-right-2 p-left-2 text-1/2 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white">
        Маленькая разделительная кнопка
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-top-1 p-bottom-1 p-right-2 p-left-2 text-1/2 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
        <svg class="w-b0 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path></svg>
    </button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full -right-e8 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>

Раскрывающийся вверх список

<div class="relative inline-flex">
	<button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
        Раскрывающийся
		<svg class="w-b0 fill-current m-left-1 rotate-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>	</button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden bottom-full left-0 m-bottom-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>
<div class="relative flex">
    <button type="button" class="flex items-cross-center radius-left-2 cursor-pointer wrap-none transition p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white">
        Разделение
    </button>
    <button class="flex items-cross-center radius-right-2 cursor-pointer wrap-none transition focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Переключатель выпадающего списка</span>
		<svg class="w-b0 fill-current rotate-8 m-left-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>	</button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden bottom-full -right-e8 m-bottom-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white border-top-1 border-gray-3" href="javascript:void(0)">Отдельная ссылка</a>
    </div>
</div>

Выравнивание выпадающего списка по правому краю кнопки

<div class="relative inline-flex">
    <button class="flex items-cross-center radius-2 cursor-pointer wrap-none transiton focus:block+hidden p-right-3 p-left-3 p-top-2 p-bottom-2 text-1 string-none bg-red-6 hover:bg-red-3 color-white hover:c-white" type="button" aria-haspopup="true" aria-expanded="false">
        Это выпадающее меню выровнено по правому краю
		<svg class="w-b0 fill-current m-left-1 rotate-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>	</button>
    <div class="z-2 absolute bg-white radius-2 border-1 border-gray-3 overflow-hidden hidden active:block-hidden top-full right-0 m-top-1">
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Другое действие</a>
        <a class="w-full block p-top-1 p-bottom-1 p-right-4 p-left-4 wrap-none underline-none color-main hover:c-main hover:bg-gray-2 active:bg-blue active:c-white" href="javascript:void(0)">Что-то еще</a>
    </div>
</div>

Адаптивность

Для установки адаптивности выпадающих списков, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью