Bootstrap
Dropdown
Notification
Ui
Html
Composant Bootstrap de dropdown de notifications accessible et responsive avec icônes et badges.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Notification Moderne & Accessible | AngularForAll</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
:root {
--primary-color: #4e73df;
--unread-bg: #f8f9fc;
}
/* Bouton Style Cercle Moderne */
.btn-notif-circle {
position: relative;
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
background: transparent;
border: none;
color: #858796;
}
.btn-notif-circle:hover,
.btn-notif-circle:focus {
background-color: rgba(0, 0, 0, 0.05);
color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}
/* Badge Moderne avec bordure blanche */
.badge-counter {
position: absolute;
transform: scale(0.7);
transform-origin: top right;
top: 2px;
right: 2px;
border: 2px solid #fff;
font-weight: 700;
}
/* Dropdown Haute Qualité */
.dropdown-list {
width: 20rem !important;
border: none;
box-shadow: 0 0.5rem 1rem 0 rgba(58, 59, 69, 0.15);
border-radius: 0.5rem;
margin-top: 10px;
}
.dropdown-list .dropdown-header {
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #fff;
border-radius: 0.5rem 0.5rem 0 0;
font-weight: 800;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
.dropdown-list .dropdown-item {
display: flex;
align-items: center;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e3e6f0;
white-space: normal;
}
.dropdown-list .unread {
background-color: var(--unread-bg);
}
/* Icônes de notification */
.icon-circle {
height: 2.5rem;
width: 2.5rem;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 1rem;
}
.text-truncate-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.85rem;
}
/* Responsive : centrer sur mobile */
@media (max-width: 575px) {
.dropdown-list {
width: calc(100vw - 2rem) !important;
position: absolute !important;
right: -50px !important;
}
}
</style>
</head>
<body class="bg-light">
<nav class="navbar navbar-expand navbar-white bg-white shadow-sm mb-4">
<div class="container">
<a class="navbar-brand font-weight-bold text-primary" href="#">DASHBOARD</a>
<ul class="navbar-nav ml-auto">
<!-- Nav Item - Notifications -->
<li class="nav-item dropdown no-arrow">
<button
class="btn-notif-circle dropdown-toggle"
type="button"
id="alertsDropdown"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
aria-label="3 notifications non lues"
>
<i class="fas fa-bell fa-fw"></i>
<!-- Counter - Notifications -->
<span class="badge badge-danger badge-counter" aria-hidden="true">3+</span>
</button>
<!-- Dropdown - Alerts -->
<div
class="dropdown-list dropdown-menu dropdown-menu-right animated--grow-in"
aria-labelledby="alertsDropdown"
>
<h6 class="dropdown-header">CENTRE DE NOTIFICATIONS</h6>
<!-- Notification Item 1 (Non lue) -->
<a class="dropdown-item d-flex align-items-center unread" href="#" role="menuitem">
<div class="icon-circle bg-primary text-white">
<i class="fas fa-file-alt"></i>
</div>
<div>
<div class="small text-muted">12 Décembre 2023</div>
<span class="font-weight-bold text-truncate-2">
Un nouveau rapport mensuel est prêt à être téléchargé !
</span>
</div>
</a>
<!-- Notification Item 2 -->
<a class="dropdown-item d-flex align-items-center" href="#" role="menuitem">
<div class="icon-circle bg-success text-white">
<i class="fas fa-donate"></i>
</div>
<div>
<div class="small text-muted">7 Décembre 2023</div>
<span class="text-truncate-2">
Virement de 290,29€ reçu sur votre compte professionnel.
</span>
</div>
</a>
<!-- Notification Item 3 -->
<a class="dropdown-item d-flex align-items-center" href="#" role="menuitem">
<div class="icon-circle bg-warning text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div>
<div class="small text-muted">2 Décembre 2023</div>
<span class="text-truncate-2">
Alerte de sécurité : Une connexion inhabituelle a été détectée.
</span>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500 py-3" href="#">
Afficher toutes les alertes
</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container mt-5 text-center">
<h1 class="h3 mb-2 text-gray-800">Interface Accessible</h1>
<p class="text-muted">
Testez avec la touche
<strong>Tab</strong>
de votre clavier pour voir le focus.
</p>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>