in English

Navbar

Dokumentasyon at mga halimbawa para sa makapangyarihan, tumutugon na header ng nabigasyon ng Bootstrap, ang navbar. May kasamang suporta para sa pagba-brand, navigation, collapse plugin, at higit pa.

Paano ito gumagana

Narito ang kailangan mong malaman bago magsimula sa navbar:

  • Ang mga Navbar ay nangangailangan ng isang pambalot para .navbarsa .navbar-expand{-sm|-md|-lg|-xl}tumutugon na pagbagsak at mga klase ng scheme ng kulay.
  • Ang mga Navbar at ang kanilang mga nilalaman ay tuluy-tuloy bilang default. Gumamit ng mga opsyonal na lalagyan upang limitahan ang kanilang pahalang na lapad.
  • Gamitin ang aming spacing at flex utility class para sa pagkontrol ng spacing at alignment sa loob ng mga navbar.
  • Ang mga Navbar ay tumutugon bilang default, ngunit madali mong mababago ang mga ito upang baguhin iyon. Nakadepende ang tumutugon na gawi sa aming Collapse JavaScript plugin.
  • Ang mga Navbar ay nakatago bilang default kapag nagpi-print. Pilitin ang mga ito na i-print sa pamamagitan ng pagdaragdag .d-printsa .navbar. Tingnan ang klase ng display utility.
  • Tiyakin ang pagiging naa-access sa pamamagitan ng paggamit ng <nav>elemento o, kung gumagamit ng mas generic na elemento gaya ng <div>, magdagdag ng a role="navigation"sa bawat navbar upang tahasang tukuyin ito bilang landmark na rehiyon para sa mga gumagamit ng mga pantulong na teknolohiya.
Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Sinusuportahang nilalaman

Ang mga Navbar ay may kasamang built-in na suporta para sa isang dakot ng mga sub-bahagi. Pumili sa mga sumusunod kung kinakailangan:

  • .navbar-brandpara sa iyong kumpanya, produkto, o pangalan ng proyekto.
  • .navbar-navpara sa isang buong taas at magaan na nabigasyon (kabilang ang suporta para sa mga dropdown).
  • .navbar-togglerpara gamitin sa aming collapse plugin at iba pang gawi sa pag- toggling ng nabigasyon .
  • .form-inlinepara sa anumang form na kontrol at pagkilos.
  • .navbar-textpara sa pagdaragdag ng patayong nakasentro na mga string ng teksto.
  • .collapse.navbar-collapsepara sa pagpapangkat at pagtatago ng mga nilalaman ng navbar sa pamamagitan ng isang breakpoint ng magulang.

Narito ang isang halimbawa ng lahat ng sub-components na kasama sa isang tumutugon na light-themed navbar na awtomatikong nag-collapse sa lg(malaking) breakpoint.

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

Ang halimbawang ito ay gumagamit ng kulay ( bg-light) at espasyo ( my-2, my-lg-0, mr-sm-0, my-sm-0) mga klase ng utility.

Tatak

Ang .navbar-brandmaaaring ilapat sa karamihan ng mga elemento, ngunit ang isang anchor ay pinakamahusay na gumagana, dahil ang ilang mga elemento ay maaaring mangailangan ng mga klase ng utility o mga custom na istilo.

<!-- 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>

Ang pagdaragdag ng mga larawan sa .navbar-branday malamang na palaging mangangailangan ng mga custom na istilo o mga kagamitan sa tamang sukat. Narito ang ilang mga halimbawa upang ipakita.

<!-- 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>

Bumubuo ang mga link sa navigation ng Navbar sa aming .navmga opsyon gamit ang sarili nilang modifier class at nangangailangan ng paggamit ng mga toggler class para sa tamang tumutugon na istilo. Ang pag-navigate sa mga navbar ay lalago din upang sakupin ang mas maraming pahalang na espasyo hangga't maaari upang panatilihing ligtas na nakahanay ang iyong mga nilalaman ng navbar.

Ang mga aktibong estado—na may .active—upang ipahiwatig ang kasalukuyang pahina ay maaaring direktang ilapat sa .nav-links o sa kanilang agarang magulang .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>

At dahil gumagamit kami ng mga klase para sa aming mga nav, maiiwasan mo nang buo ang diskarteng nakabatay sa listahan kung gusto mo.

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

Maaari mo ring gamitin ang mga dropdown sa iyong navbar. Ang mga dropdown na menu ay nangangailangan ng wrapping element para sa pagpoposisyon, kaya siguraduhing gumamit ng hiwalay at nested na elemento para sa .nav-itemat .nav-linktulad ng ipinapakita sa ibaba.

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

Mga porma

Maglagay ng iba't ibang mga kontrol sa form at mga bahagi sa loob ng isang navbar na may .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>

Ang mga agarang elemento ng bata ng .navbarpaggamit ng flex layout at magiging default sa justify-content: space-between. Gumamit ng mga karagdagang flex utilities kung kinakailangan upang ayusin ang gawi na ito.

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

Gumagana rin ang mga pangkat ng input:

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

Sinusuportahan din ang iba't ibang mga button bilang bahagi ng mga form na ito ng navbar. Isa rin itong magandang paalala na ang mga utility ng vertical alignment ay maaaring gamitin upang ihanay ang iba't ibang laki ng mga elemento.

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

Text

Ang mga Navbar ay maaaring maglaman ng mga piraso ng teksto sa tulong ng .navbar-text. Inaayos ng klase na ito ang vertical alignment at horizontal spacing para sa mga string ng text.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Paghaluin at pagtugmain ang iba pang mga bahagi at kagamitan kung kinakailangan.

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

Mga scheme ng kulay

Ang pag-theming sa navbar ay hindi kailanman naging mas madali salamat sa kumbinasyon ng mga klase sa pag-theming at mga background-colorutility. Pumili mula .navbar-lightsa para sa paggamit sa mga matingkad na kulay ng background, o .navbar-darkpara sa madilim na mga kulay ng background. Pagkatapos, i-customize gamit ang .bg-*mga utility.

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

Mga lalagyan

Bagama't hindi ito kinakailangan, maaari mong balutin ang isang navbar sa isang .containerupang igitna ito sa isang pahina. O maaari kang magdagdag ng lalagyan sa loob ng .navbarupang isentro lamang ang mga nilalaman ng isang nakapirming o static na tuktok na navbar .

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

Kapag ang lalagyan ay nasa loob ng iyong navbar, ang pahalang na padding nito ay aalisin sa mga breakpoint na mas mababa kaysa sa iyong tinukoy na .navbar-expand{-sm|-md|-lg|-xl}klase. Tinitiyak nito na hindi kami nagdodoble sa padding nang hindi kinakailangan sa mas mababang viewport kapag na-collapse ang iyong navbar.

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

Paglalagay

Gamitin ang aming mga kagamitan sa posisyon upang ilagay ang mga navbar sa mga hindi static na posisyon. Pumili mula sa naayos hanggang sa itaas, naayos hanggang sa ibaba, o nakadikit sa itaas (nag-scroll gamit ang pahina hanggang sa maabot nito ang tuktok, pagkatapos ay mananatili doon). Ang mga nakapirming navbar ay gumagamit ng position: fixed, ibig sabihin ay nakuha ang mga ito mula sa normal na daloy ng DOM at maaaring mangailangan ng custom na CSS (hal., padding-topsa <body>) ​​upang maiwasan ang pag-overlap sa iba pang mga elemento.

Tandaan din na .sticky-topgumagamit ng position: sticky, na hindi ganap na sinusuportahan sa bawat browser .

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

Pag-scroll

Idagdag .navbar-nav-scrollsa isang .navbar-collapse(o iba pang sub-component ng navbar) upang paganahin ang patayong pag-scroll sa loob ng mga toggleable na nilalaman ng isang collapsed navbar. Bilang default, nagsisimula ang pag-scroll sa 75vh(o 75% ng taas ng viewport), ngunit maaari mong i-override iyon gamit ang mga inline o custom na istilo. Sa mas malalaking viewport kapag pinalawak ang navbar, lalabas ang content tulad ng ginagawa nito sa default na navbar.

Pakitandaan na ang pag-uugaling ito ay may potensyal na disbentaha ng overflow—kapag ang pagtatakda overflow-y: auto(kinakailangan upang mag-scroll ng nilalaman dito), overflow-xay katumbas ng auto, na mag-crop ng ilang pahalang na nilalaman.

Narito ang isang halimbawa ng navbar gamit .navbar-nav-scrollang style="max-height: 100px;", na may ilang karagdagang margin utility para sa pinakamainam na espasyo.

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

Mga tumutugon na pag-uugali

Maaaring gamitin ng mga Navbar ang .navbar-toggler, .navbar-collapse, at .navbar-expand{-sm|-md|-lg|-xl}mga klase upang matukoy kung kailan nag-collapse ang kanilang nilalaman sa likod ng isang button. Sa kumbinasyon ng iba pang mga utility, madali mong mapipili kung kailan ipapakita o itatago ang mga partikular na elemento.

Para sa mga navbar na hindi kailanman bumagsak, idagdag ang .navbar-expandklase sa navbar. Para sa mga navbar na palaging nagko-collapse, huwag magdagdag ng anumang .navbar-expandklase.

Toggler

Ang mga toggler ng Navbar ay naka-left-align bilang default, ngunit kung susundin nila ang elementong magkakapatid tulad ng .navbar-brand, awtomatiko silang maili-align sa dulong kanan. Kapag binaligtad ang iyong markup, mababaligtad ang pagkakalagay ng toggler. Nasa ibaba ang mga halimbawa ng iba't ibang istilo ng toggle.

Nang walang .navbar-brandipinapakita sa pinakamaliit na breakpoint:

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

Sa isang pangalan ng tatak na ipinapakita sa kaliwa at toggler sa kanan:

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

May toggler sa kaliwa at brand name sa kanan:

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

Panlabas na nilalaman

Minsan gusto mong gamitin ang collapse plugin upang mag-trigger ng isang elemento ng container para sa content na structurally nakaupo sa labas ng .navbar. Dahil ang aming plugin ay gumagana sa idat data-targettumutugma, iyon ay madaling gawin!

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

Kapag ginawa mo ito, inirerekumenda namin ang pagsama ng karagdagang JavaScript upang ilipat ang focus sa programmatically sa container kapag binuksan ito. Kung hindi, ang mga gumagamit ng keyboard at mga gumagamit ng mga teknolohiyang pantulong ay malamang na mahihirapang hanapin ang bagong nahayag na nilalaman - lalo na kung ang container na binuksan ay nauuna sa toggler sa istraktura ng dokumento. Inirerekomenda din namin na tiyaking may aria-controlskatangian ang toggler, na tumuturo sa idlalagyan ng nilalaman. Sa teorya, binibigyang-daan nito ang mga gumagamit ng pantulong na teknolohiya na direktang tumalon mula sa toggler patungo sa lalagyan na kinokontrol nito–ngunit ang suporta para dito ay kasalukuyang medyo tagpi-tagpi.