Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

شريط التنقل (Navbar)

مستندات وأمثلة لشريط التنقل (navbar) القوي والمتوافق مع الشاشات من Bootstrap. يتضمن دعماً للعلامة التجارية، والتنقل، والمزيد، بما في ذلك دعم إضافة الـ collapse الخاصة بنا.

في هذه الصفحة

كيف يعمل ؟

إليك ما تحتاج إلى معرفته قبل البدء في استخدام الـ navbar:

  • تتطلب أشرطة التنقل (Navbars) تغليفاً بـ .navbar مع .navbar-expand{-sm|-md|-lg|-xl|-xxl} من أجل الانهيار المتوافق مع الشاشات وفئات مخطط الألوان.
  • أشرطة التنقل ومحتوياتها تكون مرنة (fluid) بشكل افتراضي. قم بتغيير الحاوية لتقييد عرضها الأفقي بطرق مختلفة.
  • استخدم فئات الأدوات الخاصة بـ التباعد و الـ flex للتحكم في التباعد والمحاذاة داخل أشرطة التنقل.
  • أشرطة التنقل متوافقة مع الشاشات (responsive) بشكل افتراضي، ولكن يمكنك تعديلها بسهولة لتغيير ذلك. يعتمد السلوك المتوافق مع الشاشات على إضافة الـ Collapse JavaScript الخاصة بنا.
  • تأكد من إمكانية الوصول باستخدام عنصر <nav> أو، في حالة استخدام عنصر أكثر عمومية مثل <div> ، أضف role="navigation" إلى كل شريط تنقل لتحديده بوضوح كمنطقة علامة للمستخدمين الذين يستخدمون التقنيات المساعدة.
  • أشر إلى العنصر الحالي باستخدام aria-current="page" للصفحة الحالية أو aria-current="true" للعنصر الحالي في مجموعة.
  • جديد في v5.2.0: يمكن تخصيص سمات أشرطة التنقل باستخدام متغيرات CSS التي تقتصر على الفئة الأساسية .navbar. تم استبعاد .navbar-light وأعيد كتابة .navbar-dark لتجاوز متغيرات CSS بدلاً من إضافة أنماط إضافية.

تعتمد تأثيرات الرسوم المتحركة لهذا المكوّن على استعلام الوسائط (media query) الخاص بـ prefers-reduced-motion. راجع قسم تقليل الحركة في مستندات إمكانية الوصول لدينا.

المحتوى المدعوم

تأتي الـ Navbars بدعم مدمج لمجموعة من المكونات الفرعية. اختر مما يلي حسب الحاجة:

  • .navbar-brand لاسم شركتك أو منتجك أو مشروعك.
  • .navbar-nav للتنقل بكامل الارتفاع وخفيف الوزن (بما في ذلك دعم القوائم المنسدلة).
  • .navbar-toggler للاستخدام مع إضافة الـ collapse الخاصة بنا وسلوكيات تبديل التنقل الأخرى.
  • أدوات الـ Flex والتباعد لأي عناصر تحكم في النماذج وإجراءات.
  • .navbar-text لإضافة سلاسل نصية ممركزة عمودياً.
  • .collapse.navbar-collapse لتجميع وإخفاء محتويات شريط التنقل حسب نقطة توقف أصلية.
  • أضف .navbar-nav-scroll اختيارياً لتعيين max-height و تمرير محتوى شريط التنقل الموسع.

إليك مثال على جميع المكونات الفرعية المضمنة في navbar متجاوب ذو مظهر فاتح يطوى تلقائياً عند نقطة التوقف lg (كبيرة).

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <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" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

هذا المثال يستخدم فئات مرافق الخلفية (bg-body-tertiary) و التباعد (me-auto, mb-2, mb-lg-0, me-2).

العلامة التجارية (Brand)

يمكن تطبيق الفئة .navbar-brand على معظم العناصر، ولكن عنصر الرابط (anchor) هو الأفضل، حيث قد تتطلب بعض العناصر فئات مرافق أو أنماطاً مخصصة.

النص

أضف نصك داخل عنصر يحمل الفئة .navbar-brand.

html 
<!-- As a link -->
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

الصورة

يمكنك استبدال النص داخل الفئة .navbar-brand باستخدام عنصر <img>.

html 
<nav class="navbar bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

الصورة والنص

يمكنك أيضاً الاستفادة من بعض مرافق إضافية لإضافة صورة ونص في نفس الوقت. لاحظ إضافة .d-inline-block و .align-text-top على عنصر <img>.

html 
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

التنقل (Nav)

تعتمد روابط التنقل في الـ Navbar على خيارات الـ .nav الخاصة بنا مع فئة معدلة خاصة بها وتتطلب استخدام فئات التبديل (toggler classes) للتنسيق المتجاوب الصحيح. سوف تتمدد قائمة التنقل في الـ navbars أيضاً لتشغل أكبر مساحة أفقية ممكنة للحفاظ على محتويات الـ navbar محاذات بشكل آمن.

أضف الفئة .active على .nav-link للإشارة إلى الصفحة الحالية.

يرجى ملاحظة أنه يجب عليك أيضاً إضافة سمة aria-current على .nav-link النشط.

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

وبما أننا نستخدم الفئات (classes) لعمليات التنقل لدينا، يمكنك تجنب النهج القائم على القوائم تماماً إذا كنت ترغب في ذلك.

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

يمكنك أيضاً استخدام القوائم المنسدلة (dropdowns) في الـ navbar الخاص بك. تتطلب القوائم المنسدلة عنصراً مغلفاً لتحديد الموضع، لذا تأكد من استخدام عناصر منفصلة ومتداخلة للفئات .nav-item و .nav-link كما هو موضح أدناه.

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link 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="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

النماذج (Forms)

ضع عناصر تحكم ومكونات نماذج متنوعة داخل الـ navbar:

html 
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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>
</nav>

تستخدم العناصر الأبناء المباشرة لـ .navbar تخطيط flex وستكون القيمة الافتراضية لها هي justify-content: space-between . استخدم أدوات (flex) إضافية حسب الحاجة لتعديل هذا السلوك.

html 
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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>
</nav>

مجموعات الإدخال (Input groups) تعمل أيضاً. إذا كان الـ navbar عبارة عن نموذج بالكامل، أو نموذج في الغالب، يمكنك استخدام عنصر <form> كحاوية وتوفير بعض الـ HTML.

html 
<nav class="navbar bg-body-tertiary">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
    </div>
  </form>
</nav>

تتوفر أيضاً أزرار متنوعة كجزء من نماذج الـ navbar هذه. وهذا تذكير رائع أيضاً بأنه يمكن استخدام مرافق المحاذاة العمودية لمحاذاة العناصر ذات الأحجام المختلفة.

html 
<nav class="navbar bg-body-tertiary">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

النص

قد تحتوي الـ Navbars على أجزاء من النصوص بمساعدة .navbar-text. تقوم هذه الفئة (class) بضبط المحاذاة العمودية والتباعد الأفقي لسلاسل النصوص.

html 
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

امزج ووفق بين المكونات والمرافق الأخرى حسب الحاجة.

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

مخططات الألوان

أشرطة التنقل الداكنة الجديدة في v5.3.0 — لقد استبعدنا .navbar-dark لصالح data-bs-theme="dark" الجديدة. أضف data-bs-theme="dark" إلى .navbar لتمكين وضع ألوان خاص بالمكون. تعرف على المزيد حول أوضاع الألوان لدينا.

جديد في v5.2.0 — أصبحت سمات شريط التنقل (Navbar theming) الآن مدعومة بواسطة متغيرات CSS وتم استبعاد .navbar-light. يتم تطبيق متغيرات CSS على .navbar، مع الافتراض بمظهر "فاتح" (light)، ويمكن تجاوز ذلك باستخدام .navbar-dark.

سمات أشرطة التنقل أسهل من أي وقت مضى بفضل مزيج Bootstrap من الـ Sass ومتغيرات CSS. الافتراضي هو "شريط التنقل الفاتح" للاستخدام مع ألوان الخلفية الفاتحة، ولكن يمكنك أيضاً تطبيق data-bs-theme="dark" على العنصر الأب .navbar لألوان الخلفية الداكنة. ثم قم بالتخصيص باستخدام .bg-* والمرافق الإضافية.

<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar bg-primary" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
  <!-- Navbar content -->
</nav>

الحاويات (Containers)

على الرغم من أنه ليس مطلوباً، يمكنك تغليف شريط التنقل (navbar) في .container لتوسيطه في الصفحة – مع ملاحظة أن الحاوية الداخلية لا تزال مطلوبة. أو يمكنك إضافة حاوية داخل .navbar لتوسيط محتويات شريط تنقل علوي ثابت أو استاتيكي فقط.

html 
<div class="container">
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

استخدم أي من الحاويات المتجاوبة لتغيير كيفية عرض عرض المحتوى في الـ navbar الخاص بك.

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

الموضع (Placement)

استخدم مرافق الموضع لوضع أشرطة التنقل في مواضع غير استاتيكية. اختر من بين التثبيت في الأعلى، أو التثبيت في الأسفل، أو التثبيت العلوي (يتحرك مع الصفحة حتى يصل إلى الأعلى، ثم يبقى هناك)، أو التثبيت السفلي (يتحرك مع الصفحة حتى يصل إلى الأسفل، ثم يبقى هناك).

تستخدم أشرطة التنقل المثبتة position: fixed، مما يعني أنها تُسحب من التدفق الطبيعي للـ DOM وقد تتطلب CSS مخصصاً (على سبيل المثال، padding-top على عنصر <body>) لمنع التداخل مع العناصر الأخرى.

html 
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

التمرير (Scrolling)

أضف .navbar-nav-scroll إلى .navbar-nav (أو أي مكون فرعي آخر لشريط التنقل) لتمكين التمرير العمودي ضمن المحتويات القابلة للتبديل في شريط تنقل منهار. بشكل افتراضي، يبدأ التمرير عند 75vh (أو 75% من ارتفاع نافذة العرض)، ولكن يمكنك تجاوز ذلك باستخدام خاصية CSS المخصصة المحلية --bs-navbar-height أو أنماط مخصصة. في نوافذ العرض الأكبر عندما يكون شريط التنقل موسعاً، سيظهر المحتوى كما هو في شريط التنقل الافتراضي.

يرجى ملاحظة أن هذا السلوك يأتي مع عيب محتمل في overflow—عند تعيين overflow-y: auto (المطلوب لتمرير المحتوى هنا)، يكون overflow-x مكافئاً لـ auto، مما سيؤدي إلى قص بعض المحتوى الأفقي.

إليك مثال على شريط تنقل يستخدم .navbar-nav-scroll مع style="--bs-scroll-height: 100px;"، مع بعض مرافق الهوامش الإضافية لتحقيق التباعد الأمثل.

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <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" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

السلوكيات المتجاوبة

يمكن لـ Navbars استخدام الفئات .navbar-toggler، و .navbar-collapse و .navbar-expand{-sm|-md|-lg|-xl|-xxl} لتحديد متى يتم طي محتواها خلف زر. وبالتنسيق مع أدوات مساعدة أخرى، يمكنك بسهولة اختيار متى تظهر عناصر معينة أو تختفي.

بالنسبة لـ navbars التي لا يتم طيها أبداً، أضف الفئة .navbar-expand إلى الـ navbar. أما بالنسبة لـ navbars التي يتم طيها دائماً، فلا تضف أي فئة .navbar-expand.

مبدل التنقل (Toggler)

تكون مبدلات التنقل (Navbar togglers) محاذية لليسار بشكل افتراضي، ولكن إذا كانت تتبع عنصراً شقيقاً مثل .navbar-brand، فسيتم محاذاتها تلقائياً إلى أقصى اليمين. عكس ترتيب العناصر في الـ markup سيؤدي إلى عكس موضع المبدل. فيما يلي أمثلة على أنماط التبديل المختلفة.

مع عدم إظهار .navbar-brand عند أصغر نقطة توقف (breakpoint):

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <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">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

مع إظهار اسم العلامة التجارية على اليسار والمبدل على اليمين:

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <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">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

مع وجود المبدل على اليسار واسم العلامة التجارية على اليمين:

html 
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <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">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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>

محتوى خارجي

أحياناً قد ترغب في استخدام إضافة الـ collapse لتفعيل عنصر حاوية لمحتوى يقع هيكلياً خارج الـ .navbar. وبما أن إضافتنا تعمل بناءً على مطابقة الـ id والـ data-bs-target ، فإن القيام بذلك سهل للغاية!

html 
<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
  <div class="bg-dark p-4">
    <h5 class="text-body-emphasis h4">Collapsed content</h5>
    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <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>

عند القيام بذلك، نوصي بتضمين JavaScript إضافية لنقل التركيز برمجياً إلى الحاوية عند فتحها. وإلا، فإن مستخدمي لوحة المفاتيح ومستخدمي التقنيات المساعدة سيواجهون على الأرجح صعوبة في العثور على المحتوى الذي تم الكشف عنه حديثاً - خاصة إذا كانت الحاوية التي تم فتحها تأتي قبل المبدل في بنية المستند. نوصي أيضاً بالتأكد من أن المبدل يحتوي على سمة aria-controls، والتي تشير إلى الـ id الخاص بحاوية المحتوى. من الناحية النظرية، يتيح ذلك لمستخدمي التقنيات المساعدة الانتقال مباشرة من المبدل إلى الحاوية التي يتحكم بها - ولكن الدعم لهذا الأمر حالياً غير مستقر تماماً.

اللوحة الجانبية (Offcanvas)

قم بتحويل شريط التنقل (navbar) الذي يتمدد وينطوي إلى درج لوحة جانبية (offcanvas) باستخدام مكون offcanvas. نحن نقوم بتوسيع كل من أنماط offcanvas الافتراضية ونستخدم الفئات .navbar-expand-* الخاصة بنا لإنشاء شريط تنقل جانبي ديناميكي ومرن.

في المثال أدناه، لإنشاء شريط تنقل offcanvas يكون مطوياً دائماً عبر جميع نقاط التوقف (breakpoints)، قم بحذف الفئة .navbar-expand-* تماماً.

html 
<nav class="navbar bg-body-tertiary fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <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>
        </ul>
        <form class="d-flex mt-3" role="search">
          <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>
  </div>
</nav>

لإنشاء شريط تنقل offcanvas يتمدد إلى شريط تنقل عادي عند نقطة توقف محددة مثل lg ، استخدم .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

عند استخدام offcanvas في شريط تنقل داكن، كن على دراية بأنك قد تحتاج إلى خلفية داكنة لمحتوى offcanvas لتجنب جعل النص غير مقروء. في المثال أدناه، نقوم بإضافة .navbar-dark و .bg-dark إلى .navbar و .text-bg-dark إلى .offcanvas و .dropdown-menu-dark إلى .dropdown-menu و .btn-close-white إلى .btn-close للتنسيق الصحيح مع offcanvas داكن.

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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>
        </ul>
        <form class="d-flex mt-3" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

الـ (CSS)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

كجزء من نهج الـ Bootstrap المتطور لمتغيرات CSS، تستخدم الـ navbars الآن متغيرات CSS محلية على .navbar لتعزيز التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر الـ Sass، لذا فإن تخصيص الـ Sass لا يزال مدعوماً أيضاً.

scss/_navbar.scss 
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

توجد بعض متغيرات CSS الإضافية أيضاً على .navbar-nav:

scss/_navbar.scss 
--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

يمكن رؤية التخصيص من خلال متغيرات CSS على الفئة .navbar-dark حيث نقوم بتجاوز قيم محددة دون إضافة محددات CSS مكررة.

scss/_navbar.scss 
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

متغيرات الـ (Sass)

متغيرات لجميع الـ navbars:

scss/_variables.scss 
$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65);
$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8);
$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1);
$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3);
$navbar-light-icon-color:           rgba($body-color, .75);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

متغيرات لـ شريط التنقل الداكن:

scss/_variables.scss 
$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-icon-color:            $navbar-dark-color;
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

حلقات الـ (Sass loops)

يتم دمج فئات توسيع/طي شريط التنقل المتوافق مع الشاشات (على سبيل المثال، .navbar-expand-lg) مع الخريطة (map) $breakpoints ويتم إنشاؤها من خلال حلقة (loop) في scss/_navbar.scss.

scss/_navbar.scss 
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}