آموزش کامل منو کشویی در بوت استرپ

0 دیدگاه

در این بخش به منو کشویی در بوت استرپ (Dropdown) می پردازیم. منوهای کشویی منوهایی هستند که کاربر می‌تواند آن‌ها را باز یا بسته کند. این منوها لینک ها را به صورت یک لیست نمایش می‌دهند. برای ساخت منوهای کشویی تعاملی، می‌توان از افزونه جاوا اسکریپت Dropdown استفاده کرد.

پیش از آن که مثال ها و ویژگی های منوهای کشویی را بررسی کنیم، لازم است چند نکته مهم را بدانید:

کتابخانه Popper برای ساخت منوی کشویی در بوت استرپ استفاده می‌شود. این کتابخانه قابلیت تشخیص موقعیت صفحه (Viewport Detection) و جایگذاری پویا (Dynamic Placement) را فراهم می‌کند.
برای فعال کردن این قابلیت ها، ابتدا باید فایل popper.min.js را پیش از فایل جاوا اسکریپت بوت استرپ در صفحه قرار دهید.
همچنین می‌توانید به جای آن از فایل های bootstrap.bundle.min.js یا bootstrap.bundle.js استفاده کنید، چون این فایل ها Popper را به طور پیش فرض شامل می‌شوند.
در نوار ناوبری (Navbar)، چون نیازی به جایگذاری پویا وجود ندارد، بوت استرپ برای موقعیت دهی Dropdown از Popper استفاده نمی‌کند.

منوی کشویی ساده

برای ایجاد یک منوی کشویی، باید دکمه یا لینک باز کننده Dropdown (Toggle) و منوی کشویی (Dropdown Menu) را داخل یک عنصر با کلاس .dropdown قرار دهید. هر عنصری که از ویژگی position: relative; استفاده کند، می‌تواند این نقش را ایفا کند.

در بسیاری از موارد، توسعه دهندگان از تگ <button> برای فعال سازی Dropdown استفاده می‌کنند. البته این افزونه با تگ <a> نیز به خوبی کار می‌کند. در مثال های زیر، از تگ <ul> برای نمایش ساختار منوی کشویی استفاده می‌شود. البته شما می‌توانید ساختار دلخواه خود را نیز پیاده سازی کنید.

پیاده سازی منو کشویی با استفاده از دکمه

با ایجاد چند تغییر در نشانه گذاری (Markup)، می‌توانید کلاس .btn را به یک دکمه کشویی (Dropdown Button) تبدیل کنید. در مثال زیر مشاهده می‌کنید که چطور می‌توان این قابلیت را با استفاده از تگ <button> پیاده سازی کرد.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Button

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

پیاده سازی منو کشویی با استفاده از لینک

هرچند استفاده از تگ <button> برای دکمه باز و بسته کننده Dropdown گزینه پیشنهادی به شمار می‌آید، اما گاهی ممکن است نیاز داشته باشید از تگ <a> استفاده کنید. برای همین، بهتر است ویژگی role="button" را به این تگ اضافه کنید. با افزودن این ویژگی، ابزارهای کمکی مانند صفحه خوان ها عملکرد این کنترل را به درستی تشخیص می‌دهند و کاربران دارای نیازهای ویژه نیز می‌توانند از منوی کشویی به راحتی استفاده کنند.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown Link
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Link

</a>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

رنگ بندی منو کشویی در بوت استرپ

برای رنگ منوهای کشویی (Dropdown Menu) می‌توانید از کلاس های زمینه ای استفاده کنید. این کلاس ها امکان می‌دهند ظاهر منوی کشویی را با رنگ های مختلف سفارشی کنید.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Primary Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Secondary Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Danger Dropdown
    </button>
    <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Info Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Success Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Light Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Warning Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Primary Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Secondary Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Danger Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Info Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Success Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Light Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Warning Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

دکمه Split

دکمه های Split Dropdown از نظر ساختار بسیار شبیه به دکمه های ساده Dropdown هستند. برای ایجاد آن ها، همان ساختار معمول Dropdown را به کار می‌بریم، اما باید کلاس .dropdown-toggle-split را نیز اضافه کنیم. این کلاس باعث می‌شود فضای کافی در اطراف نماد فلش فراهم شود.

زمانی که این کلاس اضافی را به کار ببرید، پدینگ افقی در دو طرف فلش به میزان ۲۵ درصد کاهش پیدا می‌کند. همچنین حاشیه چپ که معمولا در دکمه های عادی Dropdown وجود دارد، حذف می‌شود.

این تغییرات باعث می‌شود:

فلش دقیقا در وسط بخش Split قرار بگیرد.
ناحیه قابل کلیک در کنار دکمه اصلی به شکل استاندارد و مناسب در بیاید.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Split Dropdown</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

<button type="button" class="btn btn-primary">Split Dropdown</button>

<span class="visually-hidden">Toggle Dropdown</span>

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

اندازه دکمه ها

منوهای کشویی (Dropdown Menus) با دکمه هایی در هر اندازه به درستی کار می‌کنند. این موضوع شامل دکمه های پیش فرض و همچنین دکمه های Split Dropdown نیز می‌شود.

دکمه Dropdown بزرگ

برای ایجاد دکمه های بزرگ تر در منوی کشویی، کافی است به دکمه خود علاوه بر کلاس .btn، کلاس .btn-lg را نیز اضافه کنید. با این کار، اندازه دکمه به صورت بزرگ نمایش داده می‌شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group">
    <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown - Large Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
    <div class="btn-group">
      <button class="btn btn-secondary btn-lg" type="button">
           Dropdown - Large split button
      </button>
      <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
      </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown - Large Button

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Dropdown - Large split button

</button>

<span class="visually-hidden">Toggle Dropdown</span>

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

دکمه Dropdown کوچک

برای ساخت دکمه های کوچک تر در منوی کشویی، کافی است به دکمه خود علاوه بر کلاس .btn، کلاس .btn-sm را نیز اضافه کنید. با این ترکیب، دکمه به صورت کوچک نمایش داده می‌شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown - Small Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <button class="btn btn-secondary btn-sm" type="button">
        Dropdown - Small split button
    </button>
    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown - Small Button

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Dropdown - Small split button

</button>

<span class="visually-hidden">Toggle Dropdown</span>

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

منو کشویی تیره در بوت استرپ

(منسوخ شده در نسخه 5.3.0)

برای ایجاد یک منوی کشویی تیره، کافی است کلاس .dropdown-menu-dark را به یک .dropdown-menu موجود اضافه کنید. با این کار، منوی کشویی با ظاهر تیره نمایش داده می‌شود. در نتیجه، این منو به خوبی با نوار ناوبری تیره یا استایل های سفارشی تیره هماهنگ خواهد شد.
علاوه بر این، در این حالت نیازی نیست آیتم های درون منو را تغییر دهید.

تغییرات جدید در نسخه 5.3.0

در نسخه 5.3.0، نوع تیره برای کامپوننت ها منسوخ شده است. به جای استفاده از .dropdown-menu-dark، اکنون باید از قابلیت جدید Color Mode استفاده کنید. برای این منظور، مقدار data-bs-theme="dark" را روی عنصر ریشه، عنصر والد یا خود کامپوننت Dropdown تنظیم کنید. با این روش، ظاهر تیره برای Dropdown به درستی اعمال می‌شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Dark
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item active" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Dark

</button>

<li><a class="dropdown-item active" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

برای استفاده از این قابلیت در نوار ناوبری، کافی است آن را درون ساختار نوار ناوبری خود قرار دهید:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
            <ul class="navbar-nav">
              <li class="nav-item dropdown">
                <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown Dark Navbar
                </button>
                <ul class="dropdown-menu dropdown-menu-dark">
                  <li><a class="dropdown-item" href="#">Create Account</a></li>
                  <li><a class="dropdown-item" href="#">Sign in</a></li>
                  <li><a class="dropdown-item" href="#">Sign out</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

<a class="navbar-brand" href="#">Navbar</a>

</button>

Dropdown Dark Navbar

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

جهت ها

در حالت راست به چپ، جهت منوهای کشویی به صورت معکوس نمایش داده می‌شود. در این حالت، کلاس .dropstart در سمت راست دیده می‌شود.

منوی کشویی وسط چین

برای وسط چین کردن منوی کشویی در زیر دکمه باز کننده (Toggle)، کافی است کلاس .dropdown-center را روی عنصر والد اعمال کنید.
با این کار، منوی کشویی دقیقا در مرکز دکمه نمایش داده می‌شود.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap - Dropdowns</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
        <title>Bootstrap - Dropdowns</title>
    </head>
    <body>
        <div class="dropdown-center">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Centered Dropdown
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out<a></li>
        </ul>
        </div>
    </body>
    </html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Centered Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

منوی Dropup در بوت استرپ

برای اینکه منوی کشویی بالای عنصر باز شود، کافی است کلاس .dropup را به عنصر والد اضافه کنید. با این تغییر، منوی Dropdown به جای اینکه زیر دکمه باز شود، در بالای آن نمایش داده می‌شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropup" style="padding-top: 200px;">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropup" style="padding-top: 200px;">
    <button type="button" class="btn btn-secondary">
        Split Dropup Button
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
        aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
    </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Create Account</a></li>
            <li><a class="dropdown-item" href="#">Sign in</a></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
 </html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropup Button

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Split Dropup Button

</button>

<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"

aria-expanded="false">

<span class="visually-hidden">Toggle Dropdown</span>

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

منوی Dropup وسط چین

برای وسط چین کردن منوی Dropup بالای عنصر، کافی است کلاس .dropup-center را به همراه کلاس .dropup روی عنصر والد قرار دهید. با این کار، منوی کشویی دقیقا در مرکز بالای دکمه یا عنصر مربوطه نمایش داده می‌شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropup dropup-center"  style="padding-top: 200px;">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Centered Dropup Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Centered Dropup Button

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

منوی Dropend

برای اینکه منوی کشویی در سمت راست عنصر نمایش داده شود، کافی است کلاس .dropend را به عنصر والد اضافه کنید. با این تنظیم، منوی کشویی در سمت راست دکمه یا عنصر مربوطه باز خواهد شد.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary">
        Split Dropend Button
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
        aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropend Button

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Split Dropend Button

</button>

<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"

aria-expanded="false">

<span class="visually-hidden">Toggle Dropend</span>

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

منوی Dropstart بوت استرپ

برای اینکه منوی کشویی در سمت چپ عنصر نمایش داده شود، کافی است کلاس .dropstart را به عنصر والد اضافه کنید. با این تنظیم، منوی کشویی در سمت چپ دکمه یا عنصر مربوطه باز خواهد شد.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group dropstart" style="padding-left: 200px;">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart Button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group dropstart">
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
          aria-expanded="false">
        <span class="visually-hidden">Toggle Dropstart</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
        <button type="button" class="btn btn-secondary">
          Split Dropstart Button
        </button>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropstart Button

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"

aria-expanded="false">

<span class="visually-hidden">Toggle Dropstart</span>

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

Split Dropstart Button

</button>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

آیتم های منو (Menu Items)

برای نمایش آیتم های منوی کشویی در بوت استرپ، می‌توانید از تگ های <a> یا <button> استفاده کنید.

در مثال زیر، نحوه نمایش آیتم های منو با استفاده از تگ <button> نشان داده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Bootstrap - Dropdowns</title>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Using Button
    </button>
    <ul class="dropdown-menu">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Menu Using Button

</button>

<li><button class="dropdown-item" type="button">Create Account</button></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

در مثال زیر، نحوه نمایش آیتم های منوی کشویی با استفاده از تگ <a> نشان داده شده است:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Using a
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Menu Using a

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

حالت فعال منو کشویی در بوت استرپ

برای فعال کردن استایل آیتم های منوی کشویی، می‌توانید کلاس .active را به آن ها اضافه کنید. این کلاس ظاهر آیتم مورد نظر را به حالت فعال (Active) تغییر می‌دهد.

علاوه بر این، برای اینکه ابزارهای کمکی (مانند صفحه خوان ها) بتوانند وضعیت فعال بودن آیتم را تشخیص دهند، باید از ویژگی aria-current استفاده کنید. اگر آیتم مربوط به صفحه جاری است، مقدار این ویژگی را برابر "page" قرار دهید. همچنین اگر آیتم به عنوان مورد فعال در یک مجموعه در نظر گرفته می‌شود، مقدار true را برای آن مشخص کنید.

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap - Dropdowns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown Menu
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item active" href="#" aria-current="true">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Menu

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

حالت غیرفعال در منو کشویی (Disabled)

برای غیرفعال کردن منوی کشویی، کافی است کلاس .disabled را به آن اضافه کنید.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item disabled">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Menu

</button>

<li><a class="dropdown-item disabled">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز بندی منو کشویی در بوت استرپ

به طور پیش فرض، منوی کشویی در فاصله ۱۰۰ درصد از بالا و در امتداد سمت چپ عنصر والد قرار می‌گیرد.
برای تغییر جهت منوی کشویی، می‌توانید از کلاس های .drop* استفاده کنید. علاوه بر این، می‌توانید با استفاده از کلاس های کمکی دیگر (Modifier Classes) تراز و جهت منو را مدیریت کنید.
اگر می‌خواهید منوی کشویی از سمت راست تراز شود، کافی است کلاس .dropdown-menu-end را به .dropdown-menu اضافه کنید.
نکته مهم این است که در حالت نمایش راست به چپ (RTL)، کلاس .dropdown-menu-end باعث می‌شود که منو در سمت چپ ظاهر شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Right-aligned Dropdown Menu
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button"> Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Right-aligned Dropdown Menu

</button>

<li><button class="dropdown-item" type="button">Create Account</button></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز بندی واکنش گرا

برای ایجاد تراز بندی واکنش گرا در منوی کشویی، ابتدا باید ویژگی data-bs-display="static" را به Dropdown اضافه کنید. با این کار، موقعیت یابی پویا (Dynamic Positioning) غیرفعال می‌شود و می‌توانید از کلاس های واکنش گرا (Responsive Variation Classes) استفاده کنید.

برای اینکه منوی کشویی در سمت راست از یک نقطه شکست (Breakpoint) مشخص تراز شود، کافی است یکی از کلاس های زیر را به منو اضافه کنید:

.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end

به این ترتیب، منو از Breakpoint مورد نظر به بعد به سمت راست تراز می‌شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        Left-aligned but right aligned for large screen
    </button>
    <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Left-aligned but right aligned for large screen

</button>

<li><button class="dropdown-item" type="button">Create Account</button></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

برای اینکه منوی کشویی از یک نقطه شکست مشخص یا بزرگ تر به سمت چپ تراز شود، کافی است کلاس های .dropdown-menu-end و .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start را به منو اضافه کنید. با این تنظیم، منو از Breakpoint تعیین شده به بعد در سمت چپ عنصر والد نمایش داده می‌شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
        Right-aligned but left aligned for large screen
    </button>
    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <li><button class="dropdown-item" type="button">Create Account</button></li>
        <li><button class="dropdown-item" type="button">Sign in</button></li>
        <li><button class="dropdown-item" type="button">Sign out</button></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Right-aligned but left aligned for large screen

</button>

<li><button class="dropdown-item" type="button">Create Account</button></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

گزینه های تراز بندی منو کشویی بوت استرپ

برای راحتی کار، می‌توانید بیشتر گزینه های تراز بندی که در مثال های بالا مشاهده کردید را در یکجا به کار ببرید.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-Primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Right-aligned Menu
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Create Account </a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          Left-aligned, right-aligned lg Dropdown
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
          Right-aligned, left-aligned lg Dropdown
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropstart">
        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropstart Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropend">
        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropend Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>

    <div class="btn-group dropup">
        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropup Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Menu

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Right-aligned Menu

</button>

<li><a class="dropdown-item" href="#">Create Account </a></li>

</ul>

</div>

Left-aligned, right-aligned lg Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Right-aligned, left-aligned lg Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Dropstart Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Dropend Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Dropup Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

محتوای منو کشویی بوت استرپ

هدر ها

برای افزودن هدر (Header) به منوی کشویی و برچسب گذاری بخش های مختلف منو، کافی است کلاس .dropdown-header را به آیتم مورد نظر اضافه کنید.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><h6 class="dropdown-header">Dropdown Header</h6></li>
        <li><a class="dropdown-item" href="#">Create Account</a></li>
        <li><a class="dropdown-item" href="#">Sign in</a></li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
    </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown

</button>

<li><h6 class="dropdown-header">Dropdown Header</h6></li>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

جداکننده ها در منو کشویی

برای جدا کردن گروه های مرتبط از آیتم های منوی کشویی، می‌توانید کلاس .dropdown-divider را به منو اضافه کنید.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

<li><a class="dropdown-item" href="#">Others</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

متن دلخواه در منو Dropdown بوت استرپ

برای قرار دادن متن دلخواه در منوی کشویی، می‌توانید از کلاس .dropdown-item-text همراه با ابزارهای فاصله گذاری (Spacing Utilities) استفاده کنید. توجه داشته باشید که ممکن است برای کنترل عرض منو، نیاز به افزودن استایل های تکمیلی داشته باشید.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu With Text
    </button>
    <div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
    <p>
        example of dropdown menu with text.
    </p>
    <p class="mb-0">
            more examples of text.
    </p>
    </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Menu With Text

</button>

<p>

example of dropdown menu with text.

</p>

more examples of text.

</p>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

ایجاد فرم در منوی کشویی

برای اضافه کردن یا ایجاد یک فرم در منوی کشویی، می‌توانید فرم مورد نظر را داخل منو قرار دهید. همچنین می‌توانید از کلاس های کمکی فاصله گذاری (Margin یا Padding Utilities) استفاده کنید تا فضای مناسب در اطراف فرم ایجاد شود.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown Menu Form
    </button>
    <div class="dropdown-menu">
        <form class="px-4 py-3">
            <div class="mb-3">
              <label for="exampleDropdownFormEmail1" class="form-label">Email Id</label>
              <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="example123@gmail.com">
            </div>
            <div class="mb-3">
              <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
              <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary">Log in</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Forgot password?</a>
        <a class="dropdown-item" href="#">Create new account</a>
    </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Dropdown Menu Form

</button>

<label for="exampleDropdownFormEmail1" class="form-label">Email Id</label>

</div>

<label for="exampleDropdownFormPassword1" class="form-label">Password</label>

</div>

</form>

<a class="dropdown-item" href="#">Forgot password?</a>

<a class="dropdown-item" href="#">Create new account</a>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

گزینه های Dropdown

برای تغییر موقعیت منوی کشویی، می‌توانید از ویژگی های data-bs-offset یا data-bs-reference استفاده کنید.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Dropdowns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="d-flex">
    <div class="dropdown me-1">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
            Offset Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-secondary">Reference Dropdown</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
    </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Offset Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

<button type="button" class="btn btn-secondary">Reference Dropdown</button>

<span class="visually-hidden">Toggle Dropdown</span>

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

<li><a class="dropdown-item" href="#">Others</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تنظیمات بستن خودکار منو کشویی

به طور پیش فرض، وقتی روی آیتم های داخل منوی کشویی یا بیرون از آن کلیک می‌کنید، منوی کشویی به صورت خودکار بسته می‌شود. برای سفارشی کردن این رفتار، می‌توانید از گزینه autoClose استفاده کنید.

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap - Dropdowns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
          Basic Dropdown
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
          Menu Close Clickable Inside
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
          Menu Close Clickable Outside
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>

      <div class="btn-group">
        <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
          Manual Close
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Create Account</a></li>
          <li><a class="dropdown-item" href="#">Sign in</a></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Dropdowns</title>

</head>

<body>

Basic Dropdown

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Menu Close Clickable Inside

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Menu Close Clickable Outside

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

Manual Close

</button>

<li><a class="dropdown-item" href="#">Create Account</a></li>

</ul>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

اگر به دنبال یادگیری بیشتر هستید، آموزش بوت استرپ به شما کمک می‌کند تا امکانات این فریم ورک را به طور کامل بشناسید.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

آموزش انیمیشن‌ سازی دو بعدی با موهو – خلق انیمیشن‌ های خلاقانه شبیه دیرین دیرین

انتشار: ۱۱ خرداد ۱۴۰۴

آموزش کامل منو کشویی در بوت استرپ

منوی کشویی ساده

پیاده سازی منو کشویی با استفاده از دکمه

پیاده سازی منو کشویی با استفاده از لینک

رنگ بندی منو کشویی در بوت استرپ

دکمه Split

اندازه دکمه ها

دکمه Dropdown بزرگ

دکمه Dropdown کوچک

منو کشویی تیره در بوت استرپ

جهت ها

منوی کشویی وسط چین

منوی Dropup در بوت استرپ

منوی Dropup وسط چین

منوی Dropend

منوی Dropstart بوت استرپ

آیتم های منو (Menu Items)

حالت فعال منو کشویی در بوت استرپ

حالت غیرفعال در منو کشویی (Disabled)

تراز بندی منو کشویی در بوت استرپ

تراز بندی واکنش گرا

گزینه های تراز بندی منو کشویی بوت استرپ

محتوای منو کشویی بوت استرپ

هدر ها

جداکننده ها در منو کشویی

متن دلخواه در منو Dropdown بوت استرپ

ایجاد فرم در منوی کشویی

گزینه های Dropdown

تنظیمات بستن خودکار منو کشویی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط