דלג לתוכן הראשי דלג לניווט במסמכים
in English

Navbar

תיעוד ודוגמאות לכותרת הניווט העוצמתית והמגיבה של Bootstrap, ה-navbar. כולל תמיכה במיתוג, ניווט ועוד, כולל תמיכה בתוסף הכיווץ שלנו.

איך זה עובד

הנה מה שאתה צריך לדעת לפני שמתחילים עם סרגל הניווט:

  • סרגלי Navbar דורשים עטיפה .navbarעם .navbar-expand{-sm|-md|-lg|-xl|-xxl}עבור כיווץ רספונסיבי ושיעורי ערכת צבעים .
  • סרגלי הניווט והתוכן שלהם זורמים כברירת מחדל. שנה את המיכל כדי להגביל את הרוחב האופקי שלהם בדרכים שונות.
  • השתמש במחלקות השירות של ריווח וגמישות שלנו לשליטה במרווחים ויישור בתוך סרגלי ניווט.
  • סרגלי הניווט מגיבים כברירת מחדל, אך אתה יכול לשנות אותם בקלות כדי לשנות זאת. התנהגות תגובה תלויה בתוסף ה-Clapse JavaScript שלנו.
  • הבטח נגישות על ידי שימוש <nav>ברכיב או, אם אתה משתמש ברכיב גנרי יותר כגון <div>, הוסף a role="navigation"לכל סרגל ניווט כדי לזהות אותו באופן מפורש כאזור ציון דרך עבור משתמשים בטכנולוגיות מסייעות.
  • ציין את הפריט הנוכחי באמצעות aria-current="page"עבור הדף הנוכחי או aria-current="true"עבור הפריט הנוכחי בסט.
אפקט האנימציה של רכיב זה תלוי prefers-reduced-motionבשאילתת המדיה. עיין בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .

תוכן נתמך

סרגלי Navbar מגיעים עם תמיכה מובנית עבור קומץ רכיבי משנה. בחר מבין האפשרויות הבאות לפי הצורך:

  • .navbar-brandעבור שם החברה, המוצר או הפרויקט שלך.
  • .navbar-navלניווט בגובה מלא וקל משקל (כולל תמיכה בתפריטים נפתחים).
  • .navbar-togglerלשימוש עם הפלאגין הכיווץ שלנו והתנהגויות חילופי ניווט אחרות.
  • כלי עזר להגמיש ומרווח עבור כל בקרות ופעולות של טופס.
  • .navbar-textלהוספת מחרוזות טקסט ממורכזות אנכית.
  • .collapse.navbar-collapseלקיבוץ והסתרת תוכן סרגל הניווט לפי נקודת עצירה של אב.
  • הוסף אופציונלי .navbar-scrollלהגדיר max-heightולגלול תוכן סרגל ניווט מורחב .

הנה דוגמה לכל רכיבי המשנה הכלולים בסרגל ניווט מגיב לנושא אור שמתמוטט אוטומטית בנקודת הפריצה lg(הגדולה).

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" 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">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>

דוגמה זו משתמשת במחלקות עזר ברקע ( bg-light) וברווח ( my-2, my-lg-0, me-sm-0, ).my-sm-0

מותג

ניתן .navbar-brandלהחיל את זה על רוב האלמנטים, אבל עוגן עובד הכי טוב, מכיוון שאלמנטים מסוימים עשויים לדרוש מחלקות שירות או סגנונות מותאמים אישית.

טֶקסט

הוסף את הטקסט שלך בתוך אלמנט עם .navbar-brandהכיתה.

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

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

תמונה

אתה יכול להחליף את הטקסט בתוך .navbar-brandב- <img>.

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

תמונה וטקסט

אתה יכול גם לעשות שימוש בכמה כלי עזר נוספים כדי להוסיף תמונה וטקסט בו-זמנית. שים לב לתוספת של .d-inline-blockועל .align-text-topה- <img>.

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

קישורי ניווט של Navbar מתבססים על .navהאפשרויות שלנו עם מחלקה משלהם ודורשים שימוש בשיעורי חילופין לעיצוב רספונסיבי נכון. הניווט בסרגלי הניווט גם יגדל ותתפוס מקום אופקי רב ככל האפשר כדי לשמור על תוכן סרגל הניווט שלך מיושר בצורה מאובטחת.

הוסף את .activeהכיתה .nav-linkכדי לציין את העמוד הנוכחי.

שים לב שאתה צריך גם להוסיף את aria-currentהתכונה ב-active .nav-link.

<nav class="navbar navbar-expand-lg navbar-light 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 navbar-light 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 navbar-light 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="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <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 navbar-light bg-light">
  <div class="container-fluid">
    <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>
</nav>

אלמנטים צאצאים מיידיים של .navbarשימוש מתגמשים בפריסה ויתנו כברירת מחדל justify-content: space-between. השתמש בכלי שירות גמישים נוספים לפי הצורך כדי להתאים התנהגות זו.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <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>
</nav>

גם קבוצות קלט עובדות. אם סרגל הניווט שלך הוא טופס שלם, או בעיקר טופס, אתה יכול להשתמש <form>באלמנט כמכיל ולשמור קצת HTML.

<nav class="navbar navbar-light 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 navbar-light 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>

טֶקסט

סרגלי הניווט עשויים להכיל פיסות טקסט בעזרת .navbar-text. מחלקה זו מתאימה את היישור האנכי והמרווח האופקי עבור מחרוזות טקסט.

<nav class="navbar navbar-light 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 navbar-light 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>

ערכות צבעים

עיצוב ה-navbar מעולם לא היה קל יותר הודות לשילוב של כיתות נושא וכלי background-colorעזר. בחר מתוך .navbar-lightלשימוש עם צבעי רקע בהירים, או .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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

מיכלים

למרות שזה לא חובה, אתה יכול לעטוף סרגל ניווט ב- .containerכדי למרכז אותו על דף - אם כי שים לב שעדיין נדרש מכולה פנימית. לחלופין, אתה יכול להוסיף מיכל בתוך .navbarכדי למרכז רק את התוכן של סרגל ניווט עליון קבוע או סטטי .

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

השתמש בכל אחד מהמכולות הרספונסיביות כדי לשנות את גודל התוכן בסרגל הניווט שלך.

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

מיקום

השתמש בכלי השירות שלנו למיקום כדי למקם סרגלי ניווט במיקומים לא סטטיים. בחר בין קבוע לחלק העליון, קבוע לחלק התחתון, או דבוק לחלק העליון (גולל עם הדף עד שהוא מגיע לחלק העליון, ואז נשאר שם). סרגלי ניווט קבועים משתמשים ב- position: fixed, כלומר הם נשלפים מהזרימה הרגילה של ה-DOM ועשויים לדרוש CSS מותאם אישית (למשל, padding-topב- <body>) כדי למנוע חפיפה עם אלמנטים אחרים.

שים לב גם .sticky-topשמשתמשים position: sticky, שאינם נתמכים במלואם בכל דפדפן .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</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 navbar-light 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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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">
        <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-toggler, .navbar-collapse, .navbar-expand{-sm|-md|-lg|-xl|-xxl}ובשיעורים כדי לקבוע מתי התוכן שלהם מתמוטט מאחורי כפתור. בשילוב עם כלי עזר אחרים, אתה יכול בקלות לבחור מתי להציג או להסתיר אלמנטים מסוימים.

עבור סרגלי ניווט שלעולם אינם מתכווצים, הוסף את .navbar-expandהכיתה בסרגל הניווט. עבור סרגלי ניווט שמתכווצים תמיד, אל תוסיף אף .navbar-expandמחלקה.

מתחלף

החלפת מצבי Navbar מיושרים לשמאל כברירת מחדל, אבל אם הם עוקבים אחר אלמנט אח כמו .navbar-brand, הם יתיישרו אוטומטית לקצה הימני. היפוך הסימון שלך יהפוך את המיקום של הבורר. להלן דוגמאות לסגנונות החלפה שונים.

ללא .navbar-brandתצוגה בנקודת השבירה הקטנה ביותר:

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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 navbar-light 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">
        <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 navbar-light 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">
        <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 עם הפלאגין offcanvas. אנו מרחיבים את שני סגנונות ברירת המחדל offcanvas ומשתמשים .navbar-expand-*בשיעורים שלנו כדי ליצור סרגל צד דינמי וגמיש לניווט.

בדוגמה שלמטה, כדי ליצור סרגל ניווט מחוץ לקנבס שמכווץ תמיד על פני כל נקודות השבירה, השמיט את .navbar-expand-*המחלקה לחלוטין.

<nav class="navbar navbar-light 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 text-reset" 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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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">
          <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>

כדי ליצור סרגל ניווט מחוץ לקנבס שמתרחב לסרגל ניווט רגיל בנקודת עצירה מסוימת כמו lg, השתמש ב .navbar-expand-lg.

<nav class="navbar navbar-light 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>

סאס

משתנים

$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-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-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-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: $navbar-nav-link-padding-x;
            padding-left: $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-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

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