چگونه کار می کند
در اینجا چیزی است که باید قبل از شروع کار با نوار ناوبری بدانید:
ناوبار برای اجزای بوت استرپ بیشتر مستندات نوار ناوبری بوت استرپ
- نوارهای ناوبری نیاز به بسته بندی دارند
.navbarبا.navbar-expand{-sm|-md|-lg|-xl|-xxl}برای فروپاشی پاسخگو و طرح رنگی کلاس ها. - نوارهای ناوبری و محتویات آنها به طور پیش فرض روان هستند. تغییر دادن کانتینر برای محدود کردن عرض افقی آنها به طرق مختلف.
- Use our فاصله گذاری و خم شدن کلاس های کاربردی برای کنترل فاصله و تراز در نوارهای ناوبری.
- نوارهای Navbar به طور پیش فرض پاسخگو هستند، اما شما به راحتی می توانید آنها را تغییر دهید تا آن را تغییر دهید. رفتار پاسخگو به پلاگین جاوا اسکریپت ما بستگی دارد.
- با استفاده از a از دسترسی اطمینان حاصل کنید
<nav>عنصر یا در صورت استفاده از یک عنصر عمومی تر مانند a<div>, add arole="navigation"به هر نوار ناوبری برای شناسایی صریح آن به عنوان یک منطقه شاخص برای کاربران فناوری های کمکی. - مورد فعلی را با استفاده از آن نشان دهید
aria-current="page"برای صفحه فعلی یاaria-current="true"برای آیتم فعلی در یک مجموعه.
اثر انیمیشن این مؤلفه به
prefers-reduced-motion پرس و جو رسانه ای را ببینید بخش حرکت کاهش یافته اسناد دسترسی ما.
برای مثال و لیستی از اجزای فرعی پشتیبانی شده به ادامه مطلب بروید.
محتوای پشتیبانی شده
نوارهای Navbar با پشتیبانی داخلی از تعداد انگشت شماری از اجزای فرعی ارائه می شوند. در صورت نیاز از بین موارد زیر انتخاب کنید:
.navbar-brandبرای نام شرکت، محصول یا پروژه شما..navbar-navبرای نام شرکت، محصول یا پروژه شما..navbar-togglerبرای نام شرکت، محصول یا پروژه شما تغییر جهت ناوبری رفتار.- برای نام شرکت، محصول یا پروژه شما.
.navbar-textبرای نام شرکت، محصول یا پروژه شما..collapse.navbar-collapseبرای نام شرکت، محصول یا پروژه شما.
برای نام شرکت، محصول یا پروژه شما lg (بزرگ) نقطه شکست.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-xxl">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu border-0 shadow" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
این مثال استفاده می کند color (bg-light) and spacing (my-2, my-lg-0, me-sm-0, my-sm-0) utility classes.
<div class="header">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<!-- Brand -->
<a href="index.html" class="me-3 me-lg-4 brand-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 64 80" fill="none">
<path d="M58.8996 22.7L26.9996 2.2C23.4996 -0.0999999 18.9996 0 15.5996 2.5C12.1996 5 10.6996 9.2 11.7996 13.3L15.7996 26.8L3.49962 39.9C-3.30038 47.7 3.79962 54.5 3.89962 54.6L3.99962 54.7L36.3996 78.5C36.4996 78.6 36.5996 78.6 36.6996 78.7C37.8996 79.2 39.1996 79.4 40.3996 79.4C42.9996 79.4 45.4996 78.4 47.4996 76.4C50.2996 73.5 51.1996 69.4 49.6996 65.6L45.1996 51.8L58.9996 39.4C61.7996 37.5 63.3996 34.4 63.3996 31.1C63.4996 27.7 61.7996 24.5 58.8996 22.7ZM46.7996 66.7V66.8C48.0996 69.9 46.8996 72.7 45.2996 74.3C43.7996 75.9 41.0996 77.1 37.9996 76L5.89961 52.3C5.29961 51.7 1.09962 47.3 5.79962 42L16.8996 30.1L23.4996 52.1C24.3996 55.2 26.5996 57.7 29.5996 58.8C30.7996 59.2 31.9996 59.5 33.1996 59.5C35.0996 59.5 36.9996 58.9 38.6996 57.8C38.7996 57.8 38.7996 57.7 38.8996 57.7L42.7996 54.2L46.7996 66.7ZM57.2996 36.9C57.1996 36.9 57.1996 37 57.0996 37L44.0996 48.7L36.4996 25.5V25.4C35.1996 22.2 32.3996 20 28.9996 19.3C25.5996 18.7 22.1996 19.8 19.8996 22.3L18.2996 24L14.7996 12.3C13.8996 8.9 15.4996 6.2 17.3996 4.8C18.4996 4 19.8996 3.4 21.4996 3.4C22.6996 3.4 23.9996 3.7 25.2996 4.6L57.1996 25.1C59.1996 26.4 60.2996 28.6 60.2996 30.9C60.3996 33.4 59.2996 35.6 57.2996 36.9Z" fill="black"></path>
</svg>
</a>
<!-- header rightbar icon -->
<div class="h-right d-flex align-items-center mr-5 mr-lg-0 order-1">
<div class="d-flex">
<a class="nav-link text-muted collapsed" data-bs-toggle="collapse" data-bs-target="#main-search" href="#" title="Search this chat" aria-expanded="false">
<i class="fa fa-search"></i>
</a>
<a class="nav-link text-primary" href="#" data-bs-toggle="modal" data-bs-target="#LayoutModal">
<i class="fa fa-sliders"></i>
</a>
<a class="nav-link text-primary" href="#" title="Settings" data-bs-toggle="modal" data-bs-target="#SettingsModal"><i class="fa fa-gear"></i></a>
</div>
<div class="dropdown notifications">
<a class="nav-link dropdown-toggle pulse" href="#" role="button" data-bs-toggle="dropdown">
<i class="fa fa-bell"></i>
<span class="pulse-ring"></span>
</a>
<div id="NotificationsDiv" class="dropdown-menu rounded-lg shadow border-0 dropdown-animation dropdown-menu-right p-0 m-0">
<div class="card border-0 w380">
<div class="card-header border-0 p-3">
<h5 class="mb-0 font-weight-light d-flex justify-content-between">
<span>Notifications Center</span>
<span class="badge text-muted">14</span>
</h5>
<ul class="nav nav-tabs mt-3 border-bottom-0" role="tablist">
<li class="nav-item">
<a class="nav-link font-weight-light ps-0 me-2 active" data-bs-toggle="tab" href="#Noti-tab-Message" role="tab">Message</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-light me-2" data-bs-toggle="tab" href="#Noti-tab-Events" role="tab">Events</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-light" data-bs-toggle="tab" href="#Noti-tab-Logs" role="tab">Logs</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div class="tab-pane fade show active" id="Noti-tab-Message" role="tabpanel">
<ul class="list-unstyled list mb-0">
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar1.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Chris Fox</span> <small>2MIN</small></p>
<span class="text-muted">changed an issue from "In Progress" to <span class="badge bg-success">Review</span></span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded-circle no-thumbnail">RH</div>
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Robert Hammer</span> <small>13MIN</small></p>
<span class="text-muted">It is a long established fact that a reader will be distracted</span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar3.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Orlando Lentz</span> <small>1HR</small></p>
<span class="text-muted">There are many variations of passages</span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar4.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Barbara Kelly</span> <small>1DAY</small></p>
<span class="text-muted">Contrary to popular belief <span class="badge bg-danger">Code</span></span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar5.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Robert Hammer</span> <small>13MIN</small></p>
<span class="text-muted">making it over 2000 years old</span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar6.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Orlando Lentz</span> <small>1HR</small></p>
<span class="text-muted">There are many variations of passages</span>
</div>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar7.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Rose Rivera</span> <small class="">1DAY</small></p>
<span class="text-muted">Add Calander Event</span>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="Noti-tab-Events" role="tabpanel">
<ul class="list-unstyled list mb-0">
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-info-circle fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted">Campaign <strong class="text-primary">Holiday Sale</strong> is nearly reach budget limit.</p>
<small class="text-muted">10:00 AM Today</small>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-thumbs-up fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted">Your New Campaign <strong class="text-primary">Holiday Sale</strong> is approved.</p>
<small class="text-muted">11:30 AM Today</small>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-pie-chart fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted">Website visits from Twitter is <strong class="text-danger">27% higher</strong> than last week.</p>
<small class="text-muted">04:00 PM Today</small>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-warning fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted"><strong class="text-warning">Error</strong> on website analytics configurations</p>
<small class="text-muted">Yesterday</small>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-thumbs-up fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted">Your New Campaign <strong class="text-primary">Holiday Sale</strong> is approved.</p>
<small class="text-muted">11:30 AM Today</small>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="Noti-tab-Logs" role="tabpanel">
<h4>No Logs right now!</h4>
</div>
</div>
<a class="card-footer text-center border-top-0" href="#"> View all notifications</a>
</div>
</div>
</div>
<div class="dropdown user-profile ms-2 ms-sm-3">
<a class="nav-link dropdown-toggle pulse p-0" href="#" role="button" data-bs-toggle="dropdown">
<img class="avatar rounded-circle img-thumbnail" src="../assets/images/profile_av.svg" alt="">
</a>
<div class="dropdown-menu rounded-lg shadow border-0 dropdown-animation dropdown-menu-right p-0 m-0">
<div class="card border-0 w240">
<div class="card-body border-bottom">
<div class="d-flex py-1">
<img class="avatar rounded-circle" src="../assets/images/profile_av.svg" alt="">
<div class="flex-fill ms-3">
<p class="mb-0 text-muted"><span class="font-weight-bold">Chris Fox</span></p>
<small class="text-muted">chris.fox@gamil.com</small>
<div>
<a href="#" class="card-link">Sign out</a>
</div>
</div>
</div>
</div>
<div class="list-group m-2">
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-user"></i>Profile & account</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-gear"></i>Settings</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-tag"></i>Customization</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-users"></i>Manage team</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-calendar"></i>My Events</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-credit-card"></i>My Statements</a>
</div>
</div>
</div>
</div>
</div>
<!-- menu toggler -->
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainHeader5">
<span class="fa fa-bars"></span>
</button>
<!-- main menu -->
<div class="collapse navbar-collapse order-0" id="mainHeader5">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fa fa-dashboard me-2"></i><span>Dashboard</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-slack me-2"></i><span>Apps</span>
</a>
<ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
<li><a class="dropdown-item" href="#">Calendar</a></li>
<li><a class="dropdown-item" href="#">Chat app</a></li>
<li><a class="dropdown-item" href="#">Inbox</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-file me-2"></i><span>Pages</span>
</a>
<ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
<li><a class="dropdown-item" href="profile.html">Profile</a></li>
<li><a class="dropdown-item" href="timeline.html">Timeline</a></li>
<li><a class="dropdown-item" href="imagegallery.html">Image Gallery</a></li>
<li><a class="dropdown-item" href="invoices.html">Invoices</a></li>
<li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
<li><a class="dropdown-item" href="teamsboard.html">Teams Board</a></li>
<li><a class="dropdown-item" href="faqs.html">FAQs</a></li>
<li><a class="dropdown-item" href="#">Widget's</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-lock me-2"></i><span>Authentication</span>
</a>
<ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
<li><a class="dropdown-item" href="auth-signin.html">Sign in</a></li>
<li><a class="dropdown-item" href="auth-signup.html">Sign up</a></li>
<li><a class="dropdown-item" href="auth-password-reset">Password reset</a></li>
<li><a class="dropdown-item" href="auth-two-step">2-Step Authentication</a></li>
<li><a class="dropdown-item" href="auth-404">404</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-file-text me-2"></i><span>Docs</span>
</a>
<ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
<li><a class="dropdown-item" href="#">Stater page</a></li>
<li><a class="dropdown-item" href="#">Documentation</a></li>
<li><a class="dropdown-item" href="#">Changelog</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Search: div -->
<div class="border-bottom px-lg-5 px-md-2 collapse bg-primary" id="main-search">
<div class="container py-4">
<div class="input-group">
<input type="text" class="form-control border-0 p-0 bg-transparent" placeholder="Search. Components, Layouts, etc...">
<div class="input-group-append ms-3">
<button class="btn btn-light" type="submit">Search</button>
</div>
</div>
</div>
</div>
</div>
<div class="header shadow-sm">
<nav class="navbar navbar-light bg-secondary py-2 py-md-3 px-lg-5 px-md-2">
<div class="container-xxl">
<!-- Brand -->
<a href="index.html" class="me-3 me-lg-4 brand-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 64 80" fill="none">
<path d="M58.8996 22.7L26.9996 2.2C23.4996 -0.0999999 18.9996 0 15.5996 2.5C12.1996 5 10.6996 9.2 11.7996 13.3L15.7996 26.8L3.49962 39.9C-3.30038 47.7 3.79962 54.5 3.89962 54.6L3.99962 54.7L36.3996 78.5C36.4996 78.6 36.5996 78.6 36.6996 78.7C37.8996 79.2 39.1996 79.4 40.3996 79.4C42.9996 79.4 45.4996 78.4 47.4996 76.4C50.2996 73.5 51.1996 69.4 49.6996 65.6L45.1996 51.8L58.9996 39.4C61.7996 37.5 63.3996 34.4 63.3996 31.1C63.4996 27.7 61.7996 24.5 58.8996 22.7ZM46.7996 66.7V66.8C48.0996 69.9 46.8996 72.7 45.2996 74.3C43.7996 75.9 41.0996 77.1 37.9996 76L5.89961 52.3C5.29961 51.7 1.09962 47.3 5.79962 42L16.8996 30.1L23.4996 52.1C24.3996 55.2 26.5996 57.7 29.5996 58.8C30.7996 59.2 31.9996 59.5 33.1996 59.5C35.0996 59.5 36.9996 58.9 38.6996 57.8C38.7996 57.8 38.7996 57.7 38.8996 57.7L42.7996 54.2L46.7996 66.7ZM57.2996 36.9C57.1996 36.9 57.1996 37 57.0996 37L44.0996 48.7L36.4996 25.5V25.4C35.1996 22.2 32.3996 20 28.9996 19.3C25.5996 18.7 22.1996 19.8 19.8996 22.3L18.2996 24L14.7996 12.3C13.8996 8.9 15.4996 6.2 17.3996 4.8C18.4996 4 19.8996 3.4 21.4996 3.4C22.6996 3.4 23.9996 3.7 25.2996 4.6L57.1996 25.1C59.1996 26.4 60.2996 28.6 60.2996 30.9C60.3996 33.4 59.2996 35.6 57.2996 36.9Z" fill="black"></path>
</svg>
</a>
<!-- Search -->
<div class="h-left">
<div class="input-group border rounded">
<button class="btn btn-outline-secondary dropdown-toggle border-0 d-none d-sm-block" type="button" data-bs-toggle="dropdown" aria-expanded="false">Fillter</button>
<ul class="dropdown-menu border-0 shadow">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search here...">
</div>
</div>
<!-- header rightbar icon -->
<div class="h-right flex-grow-1 justify-content-end d-flex align-items-center me-5 me-lg-0">
<div class="d-flex">
<a class="nav-link text-primary" href="#" title="Settings" data-bs-toggle="modal" data-bs-target="#SettingsModal"><i class="fa fa-gear"></i></a>
<a class="nav-link text-primary" href="#" data-bs-toggle="modal" data-bs-target="#LayoutModal">
<i class="fa fa-sliders"></i>
</a>
</div>
<div class="dropdown notifications">
<a class="nav-link dropdown-toggle pulse" href="#" role="button" data-bs-toggle="dropdown">
<i class="fa fa-bell"></i>
<span class="pulse-ring"></span>
</a>
<div id="NotificationsDiv" class="dropdown-menu rounded-lg shadow border-0 dropdown-animation dropdown-menu-right p-0 m-0">
<div class="card border-0 w380">
<div class="card-header border-0 p-3">
<h5 class="mb-0 font-weight-light d-flex justify-content-between">
<span>Notifications Center</span>
<span class="badge text-muted">14</span>
</h5>
<ul class="nav nav-tabs mt-3 border-bottom-0" role="tablist">
<li class="nav-item">
<a class="nav-link font-weight-light ps-0 me-2 active" data-bs-toggle="tab" href="#Noti-tab-Message" role="tab">Message</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-light me-2" data-bs-toggle="tab" href="#Noti-tab-Events" role="tab">Events</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-light" data-bs-toggle="tab" href="#Noti-tab-Logs" role="tab">Logs</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div class="tab-pane fade show active" id="Noti-tab-Message" role="tabpanel">
<ul class="list-unstyled list mb-0">
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar1.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Chris Fox</span> <small>2MIN</small></p>
<span class="text-muted">changed an issue from "In Progress" to <span class="badge bg-success">Review</span></span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded-circle no-thumbnail">RH</div>
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Robert Hammer</span> <small>13MIN</small></p>
<span class="text-muted">It is a long established fact that a reader will be distracted</span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar3.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Orlando Lentz</span> <small>1HR</small></p>
<span class="text-muted">There are many variations of passages</span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar4.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Barbara Kelly</span> <small>1DAY</small></p>
<span class="text-muted">Contrary to popular belief <span class="badge bg-danger">Code</span></span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar5.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Robert Hammer</span> <small>13MIN</small></p>
<span class="text-muted">making it over 2000 years old</span>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar6.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Orlando Lentz</span> <small>1HR</small></p>
<span class="text-muted">There are many variations of passages</span>
</div>
</a>
</li>
<li class="py-2">
<a href="javascript:void(0);" class="d-flex">
<img class="avatar rounded-circle" src="../assets/images/xs/avatar7.svg" alt="">
<div class="flex-fill ms-3">
<p class="d-flex justify-content-between mb-0 text-muted"><span class="font-weight-bold">Rose Rivera</span> <small class="">1DAY</small></p>
<span class="text-muted">Add Calander Event</span>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="Noti-tab-Events" role="tabpanel">
<ul class="list-unstyled list mb-0">
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-info-circle fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted">Campaign <strong class="text-primary">Holiday Sale</strong> is nearly reach budget limit.</p>
<small class="text-muted">10:00 AM Today</small>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-thumbs-up fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted">Your New Campaign <strong class="text-primary">Holiday Sale</strong> is approved.</p>
<small class="text-muted">11:30 AM Today</small>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-pie-chart fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted">Website visits from Twitter is <strong class="text-danger">27% higher</strong> than last week.</p>
<small class="text-muted">04:00 PM Today</small>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-warning fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted"><strong class="text-warning">Error</strong> on website analytics configurations</p>
<small class="text-muted">Yesterday</small>
</div>
</a>
</li>
<li class="py-2 mb-1 border-bottom">
<a href="javascript:void(0);" class="d-flex">
<div class="avatar rounded no-thumbnail"><i class="fa fa-thumbs-up fa-lg"></i></div>
<div class="flex-fill ms-3">
<p class="mb-0 text-muted">Your New Campaign <strong class="text-primary">Holiday Sale</strong> is approved.</p>
<small class="text-muted">11:30 AM Today</small>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="Noti-tab-Logs" role="tabpanel">
<h4>No Logs right now!</h4>
</div>
</div>
<a class="card-footer text-center border-top-0" href="#"> View all notifications</a>
</div>
</div>
</div>
<div class="dropdown user-profile ms-2 ms-sm-3">
<a class="nav-link dropdown-toggle pulse p-0" href="#" role="button" data-bs-toggle="dropdown">
<img class="avatar rounded-circle img-thumbnail" src="../assets/images/profile_av.svg" alt="">
</a>
<div class="dropdown-menu rounded-lg shadow border-0 dropdown-animation dropdown-menu-right p-0 m-0">
<div class="card border-0 w240">
<div class="card-body border-bottom">
<div class="d-flex py-1">
<img class="avatar rounded-circle" src="../assets/images/profile_av.svg" alt="">
<div class="flex-fill ms-3">
<p class="mb-0 text-muted"><span class="font-weight-bold">Chris Fox</span></p>
<small class="text-muted">chris.fox@gamil.com</small>
<div>
<a href="#" class="card-link">Sign out</a>
</div>
</div>
</div>
</div>
<div class="list-group m-2">
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-user"></i>Profile & account</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-gear"></i>Settings</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-tag"></i>Customization</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-users"></i>Manage team</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-calendar"></i>My Events</a>
<a href="#" class="list-group-item list-group-item-action border-0"><i class="w30 fa fa-credit-card"></i>My Statements</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="sub-header">
<nav class="navbar navbar-light navbar-expand-lg p-0">
<div class="container-xxl">
<!-- menu toggler -->
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainHeader1">
<span class="fa fa-bars"></span>
</button>
<!-- main menu -->
<div class="collapse navbar-collapse order-0 py-1 py-md-2 px-lg-5 px-md-4" id="mainHeader1">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fa fa-dashboard me-2"></i><span>Dashboard</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-slack me-2"></i><span>Apps</span>
</a>
<ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
<li><a class="dropdown-item" href="#">Calendar</a></li>
<li><a class="dropdown-item" href="#">Chat app</a></li>
<li><a class="dropdown-item" href="#">Inbox</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-file me-2"></i><span>Pages</span>
</a>
<ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
<li><a class="dropdown-item" href="profile.html">Profile</a></li>
<li><a class="dropdown-item" href="timeline.html">Timeline</a></li>
<li><a class="dropdown-item" href="imagegallery.html">Image Gallery</a></li>
<li><a class="dropdown-item" href="invoices.html">Invoices</a></li>
<li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
<li><a class="dropdown-item" href="teamsboard.html">Teams Board</a></li>
<li><a class="dropdown-item" href="faqs.html">FAQs</a></li>
<li><a class="dropdown-item" href="#">Widget's</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-lock me-2"></i><span>Authentication</span>
</a>
<ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
<li><a class="dropdown-item" href="auth-signin.html">Sign in</a></li>
<li><a class="dropdown-item" href="auth-signup.html">Sign up</a></li>
<li><a class="dropdown-item" href="auth-password-reset">Password reset</a></li>
<li><a class="dropdown-item" href="auth-two-step">2-Step Authentication</a></li>
<li><a class="dropdown-item" href="auth-404">404</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-file-text me-2"></i><span>Docs</span>
</a>
<ul class="dropdown-menu rounded-lg shadow border-0 dropdown-animation">
<li><a class="dropdown-item" href="#">Stater page</a></li>
<li><a class="dropdown-item" href="#">Documentation</a></li>
<li><a class="dropdown-item" href="#">Changelog</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
محتوای خارجی
گاهی اوقات می خواهید از افزونه جمع کردن برای راه اندازی محتوای پنهان در جای دیگری از صفحه استفاده کنید. زیرا افزونه ما روی آن کار می کند id and data-bs-target تطبیق، که به راحتی انجام می شود!
محتوای جمعشده
از طریق نام تجاری نوار ناوبری قابل تغییر است.
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-xxl">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
تنظیمات سفارشی
تنظیمات رنگ قالب
گرادیان نوار کناری
- برای تنظیمات پویا کلیک کنید