Bootstrap - Padajuće meni (Dropdowns)

Kreiranje padajućih menija pomoću Bootstrapa

Padajući meni obično se koristi unutar zaglavlja navigacije za prikaz popisa povezanih veza kada korisnik mišem zadrži pokazivač miša ili klikne na element okidača. Možete upotrijebiti padajući dodatak Bootstrap za dodavanje padajućih menija koji se mogu mijenjati (tj. Otvaranje i zatvaranje pri kliku) gotovo svemu, poput veza, dugmadi ili grupa dugmadi, traka za navigaciju, kartica i tableta navigacije itd. čak i bez pisanja ijedne linije JavaScript koda.


Dodavanje padajućih menija putem Data Attributes

Bootstrap pruža jednostavan i elegantan mehanizam za dodavanje padajućeg menija elementu putem atributa podataka (data attributes). Sljedeći primjer će vam pokazati minimalne oznake potrebne za dodavanje padajućeg menija hipervezi putem atributa podataka (data attributes). 

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Odaberi kurs</a>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">HTML5 & CSS3</a>
        <a href="#" class="dropdown-item">Bootstrap</a>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dodavanje padajućih menija u Bootstrap 4 putem atributa podataka (Data Attributes)</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Odaberi kurs</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrap</a>
        </div>
    </div>
</div>
</body>
</html>

Gornji primjer prikazuje najosnovniji oblik padajućih menija u Bootstrap-u. Hajde da razjasnimo svaki dio padajuće komponente Bootstrap-a jedan po jedan. Padajući meni Bootstrap-a ima u osnovi dvije komponente - padajući pokretački element koji može biti hiperveza ili dugme, te sam padajući meni.

  • Klasa .dropdown navodi padajući meni.
  • Klasa .dropdown-toggle definiše element okidača, koji je u našem slučaju hiperveza, dok je atribut data-toggle="dropdown" potreban na elementu okidača za prebacivanje padajućeg menija.
  • Element <div> sa klasom .dropdown-menu zapravo gradi padajući meni koji obično sadrži povezane veze ili radnje.

Slično, možete dodati padajuće menije na dugmad i navigacijske komponente. Sljedeći dio će vam pokazati neke uobičajene implementacije padajućeg menija u Bootstrap-u.


Padajući meni unutar Navbar-a

Sljedeći primjeri će vam pokazat kako dodati padajuće meni na navigacijsku traku. 

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">IT TUTORIJALI</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">Početna</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Profil</a>
            </li>
            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Poruke</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Pristigle</a>
                    <a href="#" class="dropdown-item">Poslane</a>
                    <a href="#" class="dropdown-item">Na čekanju</a>
                    <div class="dropdown-divider"></div>
                    <a href="#"class="dropdown-item">Nepoželjne</a>
                </div>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item">Obavještenja</a>
                    <a href="#" class="dropdown-item">Podešavanja</a>
                    <div class="dropdown-divider"></div>
                    <a href="#"class="dropdown-item">Odjavi se</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 padajući meni unutar Navbar-a</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a href="#" class="navbar-brand">IT TUTORIJALI</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Početna</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Profil</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Poruke</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Pristigle</a>
                        <a href="#" class="dropdown-item">Poslane</a>
                        <a href="#" class="dropdown-item">Na čelanju</a>
                        <div class="dropdown-divider"></div>
                        <a href="#"class="dropdown-item">Nepoželjne</a>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Obavještenja</a>
                        <a href="#" class="dropdown-item">Podešavanja</a>
                        <div class="dropdown-divider"></div>
                        <a href="#"class="dropdown-item">Odjavi se</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</div>
</body>
</html>

Padajući meni u okviru Navs

Sljedeći primjer će vam pokazati kako dodati padajuće meni u tablete. 

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link active">Početna</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profil</a>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Poruke</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Pristigle</a>
            <a href="#" class="dropdown-item">Poslane</a>
            <a href="#" class="dropdown-item">Na čekanju</a>
            <div class="dropdown-divider"></div>
            <a href="#"class="dropdown-item">Nepoželjne</a>
        </div>
    </li>
    <li class="nav-item dropdown ml-auto">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
        <div class="dropdown-menu dropdown-menu-right">
            <a href="#" class="dropdown-item">Obavještenja</a>
            <a href="#" class="dropdown-item">Podešavanja</a>
            <div class="dropdown-divider"></div>
            <a href="#"class="dropdown-item">Odjavi se</a>
        </div>
    </li>
</ul>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 padajuća meni u okviru Nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="nav nav-pills mb-5">
        <li class="nav-item">
            <a href="#" class="nav-link active">Početna</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Profil</a>
        </li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Poruke</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Pristigle</a>
                <a href="#" class="dropdown-item">Poslane</a>
                <a href="#" class="dropdown-item">Na čekanju</a>
                <div class="dropdown-divider"></div>
                <a href="#"class="dropdown-item">Nepoželjne</a>
            </div>
        </li>
        <li class="nav-item dropdown ml-auto">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Obavještenja</a>
                <a href="#" class="dropdown-item">Podešavanja</a>
                <div class="dropdown-divider"></div>
                <a href="#"class="dropdown-item">Odjavi se</a>
            </div>
        </li>
    </ul>
    <hr>
    <ul class="nav nav-tabs mt-5">
        <li class="nav-item">
            <a href="#" class="nav-link active">Početna</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Profil</a>
        </li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Poruke</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Pristigle</a>
                <a href="#" class="dropdown-item">Poslane</a>
                <a href="#" class="dropdown-item">Na čekanju</a>
                <div class="dropdown-divider"></div>
                <a href="#"class="dropdown-item">Nepoželjne</a>
            </div>
        </li>
        <li class="nav-item dropdown ml-auto">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Obavještenja</a>
                <a href="#" class="dropdown-item">Podešavanja</a>
                <div class="dropdown-divider"></div>
                <a href="#"class="dropdown-item">Odjavi se</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

Gornji primjer možete jednostavno pretvoriti u padajući meni kartice zamjenom klasa .nav-pills sa .nav-tabs, bez ikakvih daljnjih promjena u označavanju.


Padajući meni unutar dugmadi

Sljedeći primjeri će vam pokazat kako dodati padajuće meni primarnom dugmetu. 

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">HTML5 & CSS3</a>
        <a href="#" class="dropdown-item">Bootstrap</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Drugi kursevi</a>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 padajući meni unutar dugmadi</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrao</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrao</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrao</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrao</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrao</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrao</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
</div>
</body>
</html>

Padajući meni Bootstrap Split Button

Sljedeći primjeri će vam pokazat kako dodati padajuće menije podijeljenim dugmadima. 

<div class="btn-group">
    <button type="button" class="btn btn-primary">Dostupni kursevi</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">HTML5 & CSS3</a>
        <a href="#" class="dropdown-item">JavaScript</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Drugi kursevi</a>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 padajući meni unutar podijeljenih dugmadi</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Dostupni kursevi</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary">Dostupni kursevi</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success">Dostupni kursevi</button>
        <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info">Dostupni kursevi</button>
        <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning">Dostupni kursevi</button>
        <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Dostupni kursevi</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
</div>
</body>
</html>

Padajući meni unutar grupa dugmadi

Da biste stvorili padajuće menije unutar grupe dugmadi, samo postavite .btn-grupu zajedno sa padajućim oznakama unutar klase .btn-grupe. 

<div class="btn-group">
    <button type="button" class="btn btn-primary">Prvo dugme</button>
    <button type="button" class="btn btn-primary">Drugo dugme</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 padajući meni unutar grupe dugmadi</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Prvo dugme</button>
        <button type="button" class="btn btn-primary">Drugo dugme</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">HTML5 & CSS3</a>
                <a href="#" class="dropdown-item">JavaScript</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Drugi kursevi</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Slično, možete stvoriti padajući meni unutar okomito naslaganih grupa dugmadi. Pogledajmo primjer: 

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Prvo dugme</button>
    <button type="button" class="btn btn-primary">Drugo dugme</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
</div>

Kreiranje padajućih, padajućih-lijevo i uspravnih menija

Možete čak pokrenuti padajuće menije iznad, kao i lijevo i desno od elemenata, dodavanjem dodatne klase .dropup, .dropleft i .dropright, prema roditeljskom elementu (tj. element .btn-grupe), kako je prikazano u sledećem primjeru: 

<!-- Padajući meni prema gore -->
<div class="btn-group dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">HTML5 & CSS3</a>
        <a href="#" class="dropdown-item">Bootstrap</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Drugi kursevi</a>
    </div>
</div>

<!-- Padajući meni lijevo -->
<div class="btn-group dropleft">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">HTML5 & CSS3</a>
        <a href="#" class="dropdown-item">Bootstrap</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Drugi kursevi</a>
    </div>
</div>

<!-- Pdajući meni desno -->
<div class="btn-group dropright">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">HTML5 & CSS3</a>
        <a href="#" class="dropdown-item">Bootstrap</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Drugi kursevi</a>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Kreiranje padajućih, padajućih-lijevo i uspravnih menija</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 200px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p><strong>Napomena:</strong> Smjer padajućeg menija može se prilagoditi,
     ako nema dovoljno prostora oko dugmeta za prikaz navedenog padajućeg izbornika.</p>
    <!-- Padajući meni prema gore -->
    <div class="btn-group dropup">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrap</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>

    <!-- Padajući meni lijevo -->
    <div class="btn-group dropleft">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrap</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>

    <!-- Pdajući meni desno -->
    <div class="btn-group dropright">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Odaberi kurs</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrap</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
</div>
</body>
</html>

Kreiranje ispravno poravnatih padajućih menija

Prema zadanim postavkama, gornji lijevi ugao padajućeg menija pozicioniran je u donjem lijevom uglu njegovog roditeljskog elementa, tj. 100% od vrha i uz lijevu stranu. Da biste desno poravnali padajući meni, samo dodajte dodatnu klasu .dropdown-menu-right u osnovnu klasu .dropdown-menu. 

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Padajući meni poravnat udesno</button>
    <div class="dropdown-menu dropdown-menu-right">
        <a href="#" class="dropdown-item">HTML5 & CSS3</a>
        <a href="#" class="dropdown-item">Bootstrap</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Drugi kursevi</a>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Desno poravnati padajući meniji</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 50px 200px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Padajući meni poravnat udesno</button>
        <div class="dropdown-menu dropdown-menu-right">
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">Bootstrap</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Drugi kursevi</a>
        </div>
    </div>
</div>
</body>
</html>

Dodavanje zaglavlja u padajuće stavke

Opcionalno možete dodati zaglavlje menija za označavanje dijela stavki menija unutar padajućeg menija dodavanjem zaglavlja klase .dropdown-header u element <div>, na sljedeći način: 

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dostupni kursevi</button>
    <div class="dropdown-menu">
        <div class="dropdown-header">Web development</div>
        <a href="#" class="dropdown-item">HTML5 & CSS3</a>
        <a href="#" class="dropdown-item">JavaScript</a>
        <a href="#" class="dropdown-item">Bootstrap</a>
        <div class="dropdown-header">Programski jezici</div>
        <a href="#" class="dropdown-item">Java</a>
        <a href="#" class="dropdown-item">Python</a>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dodavanje zaglavlja u padajuće menije Bootstrap 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dostupni kursevi</button>
        <div class="dropdown-menu">
            <div class="dropdown-header">Web development</div>
            <a href="#" class="dropdown-item">HTML5 & CSS3</a>
            <a href="#" class="dropdown-item">JavaScript</a>
            <a href="#" class="dropdown-item">Bootstrap</a>
            <div class="dropdown-header">Programski jezici</div>
            <a href="#" class="dropdown-item">Java</a>
            <a href="#" class="dropdown-item">Python</a>
        </div>
    </div>
</div>
</body>
</html>

Onemogućite stavke unutar padajućeg menija

Klasu .disabled možete primijeniti na stavke padajućih menija, kako bi izgledale kao onemogućene. Međutim, na linkove se i dalje može kliknuti, da biste je onemogućili, obično možete ukloniti href atribut bilo pomoću JavaScript ili ručno. 

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Izvještaj</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Pogledaj</a>
        <a href="#" class="dropdown-item">Skini</a>
        <a href="#" class="dropdown-item disabled" tabindex="-1">Uredi / Izbriši</a>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Onemogućavanje linkova u padajućim menijima Bootstrap 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Izvještaj</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Pogledaj</a>
            <a href="#" class="dropdown-item">Skini</a>
            <a href="#" class="dropdown-item disabled" tabindex="-1">Uredi / Izbriši</a>
        </div>
    </div>
</div>
</body>
</html>

Dodavanje padajućih menija putem JavaScript

Takođe možete ručno da dodate padajuće menije koristeći JavaScript - samo pozovite metodu dropdown() Bootstrap metodu sa ID-om ili selektorom klase linka ili dugmeta u vašem JavaScript kodu. 

<script>
$(document).ready(function(){
    $(".dropdown-toggle").dropdown();
});  
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dodavanje padajućih menija u Bootstrap 4 putem JavaScript</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 50px;
    }
</style>
<script>
    $(document).ready(function(){
        $(".dropdown-toggle").dropdown();
    });  
</script>
</head>
<body>
<div class="bs-example">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Izvještaj</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Pogledaj</a>
            <a href="#" class="dropdown-item">Skini</a>
            <a href="#" class="dropdown-item disabled" tabindex="-1">Uredi / Izbriši</a>
        </div>
    </div>
</div>
</body>
</html>

Opcije

Postoje određene opcije koje se mogu prenijeti na dropdown() Bootstrap metodu za prilagođavanje funkcionalnosti padajućeg menija. Opcije se mogu prosljediti putem atributa podataka ili JavaScript. Za postavljanje padajućih opcija putem atributa podataka (data attributes), samo dodajte naziv opcije data-, poput data-offset="10", data-display="static", itd.

Ime Tip Vrijednost Opis
offset number | string | function 0 Određuje pomak padajućeg menija u odnosu na njegov cilj. Možete odrediti pomak u različitim jedinicama, poput: px, %, vw, vh, itd. Vrijednosti bez jedinice tumačene se kao pikseli.
flip boolean true Dopušta okretanje padajućeg menija u slučaju preklapanja referentnog elementa.
boundary string | element 'scrollParent' Granica ograničenja prelivanja padajućeg menija. Prihvata vrijednosti 'viewport', 'window', 'scrollParent' ili HTMLElement reference (samo JavaScript).
reference string | element 'toggle' Referentni element padajućeg menija. Prihvata vrijednosti 'toggle', 'parent' ili HTMLElement reference.
display string 'dynamic' Navodi dinamičko pozicioniranje za padajuće menije. Ovo možete onemogućiti s vrijednošću 'static'.