Navbar

Dokumentasyon ug mga pananglitan alang sa gamhanan, responsive nga navigation header sa Bootstrap, ang navbar. Naglakip sa suporta alang sa branding, nabigasyon, collapse plugin, ug uban pa.

Giunsa kini paglihok

Ania ang kinahanglan nimong mahibal-an sa dili pa magsugod sa navbar:

Ang mga Navbar nanginahanglan usa ka pagputos .navbaralang .navbar-expand{-sm|-md|-lg|-xl}sa mga responsive collapsing ug color scheme nga mga klase.
Ang mga Navbar ug ang mga sulod niini kay fluid sa default. Gamita ang opsyonal nga mga sudlanan aron limitahan ang ilang pinahigda nga gilapdon.
Gamita ang among spacing ug flex utility classes para makontrol ang spacing ug alignment sulod sa navbars.
Ang mga Navbars responsive sa default, apan dali nimo kini usbon aron mabag-o kana. Ang responsive nga kinaiya nagdepende sa among Collapse JavaScript plugin.
Ang mga Navbar gitago sa default kung nag-imprinta. Pugsa kini nga maimprinta pinaagi sa pagdugang .d-printsa .navbar. Tan-awa ang klase sa display utility.
Siguruha ang pagka-access pinaagi sa paggamit sa usa ka <nav>elemento o, kung mogamit usa ka labi ka generic nga elemento sama sa usa ka <div>, pagdugang usa role="navigation"sa matag navbar aron klaro nga mailhan kini ingon usa ka timaan nga rehiyon alang sa mga tiggamit sa mga teknolohiya nga makatabang.

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Gisuportahan nga sulud

Ang mga Navbar adunay built-in nga suporta alang sa pipila ka mga sub-sangkap. Pagpili gikan sa mosunod kon gikinahanglan:

.navbar-brandalang sa imong kompanya, produkto, o ngalan sa proyekto.
.navbar-navalang sa bug-os nga gitas-on ug gaan nga nabigasyon (lakip ang suporta alang sa mga dropdown).
.navbar-togglerpara gamiton sa among collapse plugin ug uban pang navigation toggling behaviors.
.form-inlinealang sa bisan unsang porma nga kontrol ug aksyon.
.navbar-textalang sa pagdugang sa vertically centered strings sa teksto.
.collapse.navbar-collapsealang sa paggrupo ug pagtago sa mga sulod sa navbar pinaagi sa usa ka breakpoint sa ginikanan.

Ania ang usa ka pananglitan sa tanan nga mga sub-sangkap nga gilakip sa usa ka responsive nga light-themed navbar nga awtomatikong nahugno sa lg(dako) nga 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>

Kini nga pananglitan naggamit sa kolor ( bg-light) ug gilay-on ( my-2, my-lg-0, mr-sm-0, my-sm-0) mga klase sa utility.

Brand

Ang .navbar-brandmahimong magamit sa kadaghanan nga mga elemento, apan ang usa ka angkla labing maayo, tungod kay ang pipila nga mga elemento mahimo’g magkinahanglan mga klase sa utility o naandan nga mga 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 pagdugang sa mga imahe sa .navbar-brandlagmit kanunay nga nanginahanglan mga kostumbre nga istilo o mga gamit sa husto nga gidak-on. Ania ang pipila ka mga pananglitan nga 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>

Ang Nav

Ang mga link sa navigation sa Navbar nagtukod sa among .navmga kapilian gamit ang ilang kaugalingon nga klase sa modifier ug nanginahanglan sa paggamit sa mga klase sa toggler alang sa husto nga pagtubag nga istilo. Ang pag-navigate sa mga navbar motubo usab aron maokupar ang daghang pinahigda nga wanang kutob sa mahimo aron mapadayon ang imong mga sulud sa navbar nga luwas nga na-align.

Aktibo nga estado-nga adunay .active-sa pagpakita sa kasamtangan nga panid mahimong magamit direkta ngadto sa .nav-links o sa ilang diha-diha nga ginikanan .nav-items.

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

Ug tungod kay naggamit kami og mga klase alang sa among mga nav, mahimo nimong likayan ang pamaagi nga nakabase sa lista kung gusto nimo.

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

Mahimo usab nimo gamiton ang mga dropdown sa imong navbar. Ang mga dropdown nga menu nanginahanglan usa ka elemento sa pagputos para sa pagpoposisyon, busa siguroha ang paggamit sa bulag ug nested nga mga elemento alang sa .nav-itemug .nav-linkingon sa gipakita sa ubos.

<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

Ibutang ang lainlaing mga kontrol sa porma ug mga sangkap sulod sa usa ka navbar nga adunay .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>

Diha-diha nga bata nga mga elemento sa .navbarpaggamit sa flex layout ug mahimong default sa justify-content: space-between. Paggamit og dugang nga flex utilities kung gikinahanglan aron ma-adjust kini nga kinaiya.

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

Ang mga grupo sa input nagtrabaho, usab:

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

Gisuportahan usab ang lainlaing mga buton ingon bahin sa kini nga mga porma sa navbar. Kini usa usab ka maayo nga pahinumdom nga ang vertical alignment utilities mahimong magamit sa pag-align sa lainlaing gidak-on nga 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 mahimong adunay mga piraso sa teksto sa tabang sa .navbar-text. Kini nga klase nag-adjust sa bertikal nga paglinya ug pinahigda nga gilay-on alang sa mga string sa teksto.

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

Pagsagol ug pagpares sa ubang mga sangkap ug mga gamit kung gikinahanglan.

<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 laraw sa kolor

Ang pag-theming sa navbar dili gyud kadali salamat sa kombinasyon sa mga klase sa tema ug mga background-colorgamit. Pagpili gikan .navbar-lightsa alang sa paggamit sa kahayag nga mga kolor sa background, o .navbar-darkalang sa itom nga mga kolor sa background. Unya, ipasibo sa mga .bg-*utilities.

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

Bisan kung wala kini kinahanglana, mahimo nimong iputos ang usa ka navbar sa usa .containeraron masentro kini sa usa ka panid. O mahimo nimong idugang ang usa ka sudlanan sa sulod .navbararon masentro lamang ang mga sulud sa usa ka naayos o static nga top navbar .

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

Kung ang sudlanan naa sa sulod sa imong navbar, ang pinahigda nga padding makuha sa mga breakpoint nga mas ubos kaysa sa imong gitakda nga .navbar-expand{-sm|-md|-lg|-xl}klase. Kini nagsiguro nga kami dili magdoble sa padding nga dili kinahanglan sa ubos nga viewports kung ang imong navbar nahugno.

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

Pagpahimutang

Gamita ang among mga gamit sa posisyon aron ibutang ang mga navbar sa dili statik nga mga posisyon. Pagpili gikan sa fixed ngadto sa ibabaw, fixed ngadto sa ubos, o idikit sa ibabaw (scrolls uban sa panid hangtud nga kini moabut sa ibabaw, unya magpabilin didto). Ang giayo nga mga navbar naggamit sa position: fixed, nagpasabut nga kini gikuha gikan sa normal nga dagan sa DOM ug mahimong magkinahanglan og custom CSS (pananglitan, padding-topsa <body>) aron malikayan ang pagsapaw sa ubang mga elemento.

Timan-i usab nga ang mga .sticky-topgamit position: sticky, nga dili hingpit nga gisuportahan sa matag 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

Idugang .navbar-nav-scrollsa usa ka .navbar-collapse(o uban pang sub-component sa navbar) aron mahimo ang bertikal nga pag-scroll sa sulod sa mga toggleable nga sulod sa usa ka nahugno nga navbar. Sa kasagaran, ang pag-scroll nagsugod sa 75vh(o 75% sa gitas-on sa viewport), apan mahimo nimong i-override kana gamit ang inline o custom nga mga estilo. Sa mas dagkong mga viewport kung ang navbar gipalapdan, ang sulod makita sama sa gibuhat sa default navbar.

Palihug timan-i nga kini nga kinaiya moabut uban sa usa ka potensyal nga disbentaha sa overflow—sa diha nga ang pag-set overflow-y: auto(gikinahanglan sa pag-scroll sa sulod dinhi), overflow-xmao ang katumbas sa auto, nga moputol sa pipila ka pinahigda nga sulod.

Ania ang usa ka pananglitan nga navbar nga naggamit .navbar-nav-scrollsa style="max-height: 100px;", uban ang pipila ka dugang nga margin utilities alang sa labing maayo nga gilay-on.

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

Responsive nga mga kinaiya

Ang mga Navbar mahimong mogamit sa .navbar-toggler, .navbar-collapse, ug .navbar-expand{-sm|-md|-lg|-xl}mga klase aron mahibal-an kung ang ilang sulud nahugno luyo sa usa ka buton. Sa kombinasyon sa ubang mga utilities, dali ka makapili kung kanus-a ipakita o itago ang mga partikular nga elemento.

Para sa mga navbar nga dili gyud mahugno, idugang ang .navbar-expandklase sa navbar. Alang sa mga navbar nga kanunay mahugno, ayaw pagdugang bisan unsang .navbar-expandklase.

Toggler

Ang mga toggler sa Navbar kay gilinya sa wala pinaagi sa default, apan kon mosunod sila sa elemento sa igsuon sama sa .navbar-brand, awtomatik sila nga ma-align sa halayong tuo. Ang pag-uli sa imong markup mobaliskad sa pagbutang sa toggler. Sa ubos mao ang mga pananglitan sa lainlaing mga istilo sa toggle.

Nga walay .navbar-brandgipakita sa pinakagamay nga 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>

Uban ang brand name nga gipakita sa wala ug toggler sa tuo:

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

Uban ang toggler sa wala ug brand name sa tuo:

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

Panggawas nga sulod

Usahay gusto nimong gamiton ang collapse plugin aron ma-trigger ang usa ka sulud nga elemento alang sa sulud nga istruktura nga naglingkod sa gawas sa .navbar. Tungod kay ang among plugin nagtrabaho sa idug data-targetpagpares, dali ra kana buhaton!

Nahugno nga sulod

Ma-toggle pinaagi sa navbar brand.

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

Kung buhaton nimo kini, among girekomenda nga ilakip ang dugang nga JavaScript aron mabalhin ang pokus nga programmatically sa sudlanan kung kini giablihan. Kung dili, ang mga tiggamit sa keyboard ug mga tiggamit sa mga teknolohiya sa pagtabang lagmit nga maglisud sa pagpangita sa bag-ong gipadayag nga sulud - labi na kung ang sudlanan nga giablihan moabut sa wala pa ang toggler sa istruktura sa dokumento. Girekomenda usab namo ang pagsiguro nga ang toggler adunay aria-controlshiyas, nga nagpunting sa sulud sa sulud id. Sa teorya, gitugotan niini ang mga tiggamit sa tabang sa teknolohiya nga direkta nga molukso gikan sa toggler hangtod sa sulud nga gikontrol niini-apan ang suporta alang niini sa pagkakaron medyo patchy.