in English

نوار ناوبری

مستندات و نمونه هایی برای هدر ناوبری قدرتمند و پاسخگو Bootstrap، نوار ناوبری. شامل پشتیبانی از نام تجاری، ناوبری، افزونه فروپاشی و موارد دیگر است.

چگونه کار می کند

قبل از شروع کار با نوار ناوبری باید بدانید:

  • نوارهای ناوبری برای جمع شدن پاسخگو و کلاس های طرح رنگ نیاز به بسته بندی دارند .navbar..navbar-expand{-sm|-md|-lg|-xl}
  • نوارهای ناوبری و محتویات آنها به طور پیش فرض روان هستند. از ظروف اختیاری برای محدود کردن عرض افقی آنها استفاده کنید.
  • از کلاس‌های کاربردی فاصله و انعطاف‌پذیری ما برای کنترل فاصله و تراز در نوارهای ناوبری استفاده کنید.
  • نوارهای Navbar به طور پیش فرض پاسخگو هستند، اما شما به راحتی می توانید آنها را تغییر دهید تا آن را تغییر دهید. رفتار پاسخگو به افزونه Collapse JavaScript ما بستگی دارد.
  • نوارهای ناوبری به طور پیش فرض هنگام چاپ پنهان می شوند. آنها را مجبور کنید با اضافه کردن .d-printبه چاپ شوند .navbar. کلاس ابزار نمایش را ببینید .
  • با استفاده از یک عنصر، دسترسی را تضمین کنید <nav>یا در صورت استفاده از یک عنصر عمومی‌تر مانند یک <div>، یک علامت role="navigation"را به هر نوار ناوبری اضافه کنید تا صریحاً آن را به عنوان یک منطقه شاخص برای کاربران فناوری‌های کمکی شناسایی کنید.
prefers-reduced-motionاثر انیمیشن این مؤلفه به پرسش رسانه بستگی دارد . بخش حرکت کاهش یافته اسناد دسترسی ما را ببینید.

محتوای پشتیبانی شده

نوارهای Navbar با پشتیبانی داخلی از تعداد انگشت شماری از اجزای فرعی ارائه می شوند. در صورت نیاز از بین موارد زیر انتخاب کنید:

  • .navbar-brandبرای نام شرکت، محصول یا پروژه شما.
  • .navbar-navبرای ناوبری تمام قد و سبک وزن (از جمله پشتیبانی از کشویی).
  • .navbar-togglerبرای استفاده با افزونه فروپاشی ما و سایر رفتارهای تغییر مسیریابی .
  • .form-inlineبرای هر گونه کنترل فرم و اقدامات.
  • .navbar-textبرای افزودن رشته های متنی در مرکز عمودی.
  • .collapse.navbar-collapseبرای گروه بندی و پنهان کردن محتویات نوار ناوبری توسط یک نقطه شکست والد.

در اینجا یک نمونه از تمام اجزای فرعی موجود در یک نوار ناوبری با موضوع نور پاسخگو است که به طور خودکار در lgنقطه شکست (بزرگ) جمع می شود.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

این مثال از کلاس های کاربردی رنگ ( bg-light) و فاصله ( my-2, my-lg-0, mr-sm-0, ) استفاده می کند.my-sm-0

نام تجاری

.navbar-brandمی توان آن را برای اکثر عناصر اعمال کرد، اما یک لنگر بهترین عملکرد را دارد، زیرا برخی از عناصر ممکن است به کلاس های کاربردی یا سبک های سفارشی نیاز داشته باشند .

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

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

افزودن تصاویر به .navbar-brandاحتمالاً همیشه نیاز به سبک ها یا ابزارهای سفارشی برای اندازه مناسب دارد. در اینجا چند نمونه برای نشان دادن آورده شده است.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

پیوندهای پیمایش نوار ناوبری بر روی .navگزینه‌های ما با کلاس اصلاح‌کننده خاص خود ساخته شده‌اند و برای استایل واکنش‌گرای مناسب نیاز به استفاده از کلاس‌های تغییردهنده دارند. پیمایش در نوارهای ناوبری نیز به گونه ای افزایش می یابد که تا حد امکان فضای افقی را اشغال کند تا محتویات نوار ناوبری شما به طور ایمن تراز شود.

حالت‌های فعال - با .active- برای نشان دادن صفحه فعلی می‌تواند مستقیماً روی .nav-links یا والد فوری آنها اعمال شود .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

و از آنجایی که ما از کلاس‌ها برای ناوبری خود استفاده می‌کنیم، در صورت تمایل می‌توانید از رویکرد مبتنی بر فهرست به طور کامل اجتناب کنید.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

همچنین می توانید از منوهای کشویی در نوار ناوبری خود استفاده کنید. منوهای کشویی به یک عنصر بسته بندی برای موقعیت یابی نیاز دارند، بنابراین حتماً از عناصر جداگانه و تودرتو برای .nav-itemو .nav-linkمطابق شکل زیر استفاده کنید.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

تشکیل می دهد

کنترل‌های فرم و اجزای مختلف را در یک نوار ناوبری با استفاده از .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

عناصر فرزند فوری از .navbarطرح انعطاف پذیر استفاده کنید و به طور پیش فرض روی justify-content: space-between. برای تنظیم این رفتار در صورت نیاز از ابزارهای انعطاف پذیر اضافی استفاده کنید.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

گروه های ورودی نیز کار می کنند:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

در صورت نیاز با سایر اجزا و ابزارهای کاربردی ترکیب و مطابقت دهید.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

طرح های رنگی

به لطف ترکیبی از کلاس های موضوعی و 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">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

وقتی کانتینر در نوار ناوبری شما باشد، بالشتک افقی آن در نقاط شکست پایین‌تر از .navbar-expand{-sm|-md|-lg|-xl}کلاس مشخص‌شده شما حذف می‌شود. این تضمین می‌کند که وقتی نوار ناوبری شما جمع می‌شود، در نمای‌پورت‌های پایین‌تر، بی‌رویه padding را دو برابر نمی‌کنیم.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

پیمایش

برای فعال کردن پیمایش عمودی در محتویات قابل تغییر یک نوار ناوبری جمع شده .navbar-nav-scroll، به یک .navbar-collapse(یا دیگر جزء فرعی نوار ناوبری) اضافه کنید. به‌طور پیش‌فرض، پیمایش در 75vh(یا 75 درصد از ارتفاع درگاه دید) شروع می‌شود، اما می‌توانید آن را با سبک‌های درون خطی یا سفارشی لغو کنید. در نماهای بزرگتر وقتی نوار ناوبری باز می شود، محتوا مانند نوار ناوبری پیش فرض ظاهر می شود.

لطفاً توجه داشته باشید که این رفتار با یک اشکال بالقوه همراه است - هنگامی overflowکه تنظیم overflow-y: auto(برای پیمایش محتوا در اینجا لازم است)، overflow-xمعادل است auto، که برخی از محتوای افقی را برش می دهد.

در اینجا یک نمونه نوار ناوبری با استفاده از .navbar-nav-scrollبا style="max-height: 100px;"، با برخی ابزارهای حاشیه اضافی برای فاصله بهینه آورده شده است.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

رفتارهای پاسخگو

نوارهای ناوبری می‌توانند از .navbar-toggler, .navbar-collapseو .navbar-expand{-sm|-md|-lg|-xl}کلاس‌ها برای تعیین زمانی که محتوای آنها پشت یک دکمه جمع می‌شود استفاده کنند. در ترکیب با ابزارهای دیگر، می توانید به راحتی انتخاب کنید که چه زمانی عناصر خاص را نشان دهید یا پنهان کنید.

برای نوارهای ناوبری که هرگز جمع نمی شوند، .navbar-expandکلاس را در نوار ناوبری اضافه کنید. برای نوارهای ناوبری که همیشه جمع می شوند، کلاسی اضافه نکنید .navbar-expand.

تعویض کننده

ضامن‌کننده‌های نوار ناوبری به‌طور پیش‌فرض تراز چپ هستند، اما اگر از یک عنصر برادر مانند یک پیروی کنند .navbar-brand، به‌طور خودکار در سمت راست تراز می‌شوند. معکوس کردن نشانه گذاری شما، قرار دادن ضامن را معکوس می کند. در زیر نمونه هایی از سبک های مختلف ضامن وجود دارد.

بدون .navbar-brandنشان داده شده در کوچکترین نقطه شکست:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

با نام تجاری نشان داده شده در سمت چپ و تغییر دهنده در سمت راست:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

با یک ضامن در سمت چپ و نام تجاری در سمت راست:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

محتوای خارجی

گاهی اوقات می خواهید از افزونه collapse برای راه اندازی یک عنصر ظرف برای محتوایی استفاده کنید که به طور ساختاری خارج از آن قرار .navbarدارد. از آنجایی که افزونه ما بر روی idو data-targetمطابقت کار می کند، این کار به راحتی انجام می شود!

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

هنگامی که این کار را انجام می‌دهید، توصیه می‌کنیم جاوا اسکریپت اضافی را اضافه کنید تا فوکوس را به صورت برنامه‌ای به محفظه منتقل کنید. در غیر این صورت، کاربران صفحه‌کلید و کاربران فناوری‌های کمکی احتمالاً در یافتن محتوای جدید آشکار شده مشکل خواهند داشت - به‌ویژه اگر ظرفی که باز شده قبل از ضامن‌کننده در ساختار سند باشد. همچنین توصیه می‌کنیم مطمئن شوید که ضامن‌کننده دارای aria-controlsویژگی است، و به idمحفظه محتوا اشاره می‌کند. در تئوری، این به کاربران فناوری کمکی اجازه می‌دهد تا مستقیماً از ضامن‌کننده به محفظه‌ای که کنترل می‌کند بپرند – اما پشتیبانی از آن در حال حاضر کاملاً ناقص است.