تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
in English

نافبار

وثائق وأمثلة لرأس التنقل القوي والسريع الاستجابة لـ Bootstrap ، شريط التنقل. يتضمن دعمًا للعلامة التجارية والتنقل والمزيد ، بما في ذلك دعم المكوِّن الإضافي للانهيار.

على هذه الصفحة

كيف تعمل

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

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

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

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

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

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

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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">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-light) والتباعد ( me-auto، mb-2، mb-lg-0، ).me-2

ماركة

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

نص

أضف النص الخاص بك داخل عنصر مع .navbar-brandالفصل.

لغة البرمجة 
<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

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

صورة

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

لغة البرمجة 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

الصورة والنص

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

لغة البرمجة 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

تعتمد روابط التنقل في Navbar على خياراتنا .navمع فئة المُعدِّل الخاصة بها وتتطلب استخدام فئات التبديل للحصول على تصميم سريع الاستجابة مناسب. سينمو التنقل في أشرطة التنقل أيضًا ليشغل أكبر مساحة أفقية قدر الإمكان للحفاظ على محاذاة محتويات شريط التنقل الخاصة بك بشكل آمن.

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

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

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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">Disabled</a>
      </div>
    </div>
  </div>
</nav>

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

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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>

نماذج

ضع عناصر تحكم ومكونات متنوعة في شريط التنقل:

لغة البرمجة 
<nav class="navbar bg-light">
  <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لاستخدام التنسيق المرن وستكون افتراضيًا justify-content: space-between. استخدم أدوات مساعدة مرنة إضافية حسب الحاجة لضبط هذا السلوك.

لغة البرمجة 
<nav class="navbar bg-light">
  <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>

تعمل مجموعات الإدخال أيضًا. إذا كان شريط التنقل نموذجًا كاملاً ، أو نموذجًا في الغالب ، فيمكنك استخدام <form>العنصر كحاوية وحفظ بعض HTML.

لغة البرمجة 
<nav class="navbar bg-light">
  <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>

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

لغة البرمجة 
<nav class="navbar bg-light">
  <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. تقوم هذه الفئة بضبط المحاذاة الرأسية والتباعد الأفقي لسلاسل النص.

لغة البرمجة 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

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

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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>

الألوان

الجديد في الإصدار 5.2.0: يتم الآن تشغيل سمات Navbar بواسطة متغيرات CSS .navbar-lightوتم إهمالها. يتم تطبيق متغيرات CSS على .navbar، افتراضيًا على المظهر "الخفيف" ، ويمكن تجاوزها .navbar-dark.

أصبحت سمات Navbar أسهل من أي وقت مضى بفضل مجموعة Bootstrap من متغيرات Sass و CSS. الافتراضي هو "شريط التنقل الخفيف" الخاص بنا للاستخدام مع ألوان الخلفية الفاتحة ، ولكن يمكنك أيضًا التقدم بطلب .navbar-darkللحصول على ألوان الخلفية الداكنة. بعد ذلك ، قم بالتخصيص باستخدام .bg-*الأدوات المساعدة.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

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

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

حاويات

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

لغة البرمجة 
<div class="container">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

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

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

تحديد مستوى

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

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

لغة البرمجة 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
لغة البرمجة 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
لغة البرمجة 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
لغة البرمجة 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
لغة البرمجة 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

التمرير

أضف .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;"، مع بعض أدوات الهامش الإضافية للتباعد الأمثل.

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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">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}لتحديد متى ينهار محتواها خلف زر. بالاشتراك مع الأدوات المساعدة الأخرى ، يمكنك بسهولة اختيار وقت إظهار أو إخفاء عناصر معينة.

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

تبديل

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

مع عدم .navbar-brandظهوره في أصغر نقطة توقف:

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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">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>

مع اسم علامة تجارية يظهر على اليسار والمفتاح على اليمين:

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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">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>

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

لغة البرمجة 
<nav class="navbar navbar-expand-lg bg-light">
  <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">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>

المحتوى الخارجي

قد ترغب أحيانًا في استخدام ملحق الطي الإضافي لتشغيل عنصر حاوية للمحتوى الموجود هيكليًا خارج نطاق .navbar. نظرًا لأن المكون الإضافي الخاص بنا يعمل على والمطابقة ، يمكن القيام بذلك بسهولة id!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-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 . نقوم بتوسيع كل من الأنماط الافتراضية offcanvas واستخدام فئاتنا .navbar-expand-*لإنشاء شريط تنقل ديناميكي ومرن.

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

لغة البرمجة 
<nav class="navbar bg-light 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">
      <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" 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-light 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">
    <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

لغة البرمجة 
<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">
      <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" 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

المتغيرات

تمت الإضافة في الإصدار 5.2.0

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

  --#{$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:

  --#{$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 مكررة.

  --#{$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)};

متغيرات ساس

المتغيرات لجميع أشرطة نافبار:

$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($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$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-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

متغيرات شريط التنقل المظلم :

$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-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-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;

حلقة ساس

يتم دمج فئات توسيع / ​​طي شريط التنقل المستجيبة (على سبيل المثال .navbar-expand-lg) مع $breakpointsالخريطة ويتم إنشاؤها من خلال حلقة في 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;
          }
        }
      }
    }
  }
}