in English

Navbar

Dogfennaeth ac enghreifftiau ar gyfer pennyn llywio ymatebol, pwerus Bootstrap, y bar llywio. Yn cynnwys cefnogaeth ar gyfer brandio, llywio, ategyn cwympo, a mwy.

Sut mae'n gweithio

Dyma beth sydd angen i chi ei wybod cyn dechrau ar y bar llywio:

  • Mae angen lapio .navbarâ barrau llywio ar gyfer cwympiadau .navbar-expand{-sm|-md|-lg|-xl}ymatebol a dosbarthiadau cynllun lliw .
  • Mae Navbars a'u cynnwys yn hylif yn ddiofyn. Defnyddiwch gynwysyddion dewisol i gyfyngu ar eu lled llorweddol.
  • Defnyddiwch ein dosbarthiadau bylchiad a fflecs ar gyfer rheoli bylchau ac aliniad o fewn barrau llywio.
  • Mae Navbars yn ymatebol yn ddiofyn, ond gallwch chi eu haddasu'n hawdd i newid hynny. Mae ymddygiad ymatebol yn dibynnu ar ein ategyn Collapse JavaScript.
  • Mae barrau llywio yn cael eu cuddio yn ddiofyn wrth argraffu. Gorfodwch nhw i gael eu hargraffu drwy ychwanegu .d-printat y .navbar. Gweler y dosbarth cyfleustodau arddangos .
  • Sicrhau hygyrchedd trwy ddefnyddio <nav>elfen neu, os ydych yn defnyddio elfen fwy generig fel <div>, ychwanegu a role="navigation"at bob navbar i'w nodi'n benodol fel rhanbarth tirnod ar gyfer defnyddwyr technolegau cynorthwyol.
Mae effaith animeiddio'r gydran hon yn dibynnu ar prefers-reduced-motionymholiad y cyfryngau. Gweler adran cynnig gostyngol ein dogfennaeth hygyrchedd .

Cynnwys a gefnogir

Mae Navbars yn dod â chefnogaeth adeiledig ar gyfer llond llaw o is-gydrannau. Dewiswch o'r canlynol yn ôl yr angen:

  • .navbar-brandar gyfer eich cwmni, cynnyrch, neu enw prosiect.
  • .navbar-navar gyfer llywio uchder llawn ac ysgafn (gan gynnwys cefnogaeth ar gyfer cwymplenni).
  • .navbar-toggleri'w ddefnyddio gyda'n ategyn cwympo ac ymddygiadau toggling llywio eraill.
  • .form-inlinear gyfer unrhyw ffurf o reolaethau a gweithredoedd.
  • .navbar-textar gyfer ychwanegu llinynnau fertigol o destun.
  • .collapse.navbar-collapsear gyfer grwpio a chuddio cynnwys y bar llywio yn ôl torbwynt rhiant.

Dyma enghraifft o'r holl is-gydrannau sydd wedi'u cynnwys mewn bar llywio ymatebol ar thema golau sy'n cwympo'n awtomatig yn y torbwynt lg(mawr).

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

Mae'r enghraifft hon yn defnyddio dosbarthiadau cyfleustodau lliw ( bg-light) a bylchiad ( my-2, my-lg-0, mr-sm-0, my-sm-0).

Brand

Gellir .navbar-brandcymhwyso'r rhain i'r rhan fwyaf o elfennau, ond mae angor yn gweithio orau, oherwydd efallai y bydd angen dosbarthiadau cyfleustodau neu arddulliau arferol ar rai elfennau.

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

Mae'n debygol y bydd angen arddulliau neu gyfleustodau arferol bob amser i ychwanegu delweddau at y .navbar-brandmaint cywir. Dyma rai enghreifftiau i ddangos.

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

Mae dolenni llywio Navbar yn adeiladu ar ein hopsiynau .navgyda'u dosbarth addasu eu hunain ac yn gofyn am ddefnyddio dosbarthiadau toggler ar gyfer steilio ymatebol priodol. Bydd llywio mewn barrau llywio hefyd yn tyfu i feddiannu cymaint o le llorweddol â phosibl i gadw cynnwys eich bar llywio wedi'i alinio'n ddiogel.

Cyflyrau gweithredol - gyda .active- i ddangos y gellir cymhwyso'r dudalen gyfredol yn uniongyrchol i .nav-links neu eu rhiant agos .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>

Ac oherwydd ein bod yn defnyddio dosbarthiadau ar gyfer ein llywio, gallwch osgoi'r dull seiliedig ar restr yn gyfan gwbl os dymunwch.

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

Gallwch hefyd ddefnyddio cwymplenni yn eich bar llywio. Mae angen elfen lapio ar fwydlenni cwymplen ar gyfer lleoli, felly gwnewch yn siŵr eich bod chi'n defnyddio elfennau ar wahân ac wedi'u nythu ar gyfer .nav-itemac .nav-linkfel y dangosir isod.

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

Ffurflenni

Rhowch wahanol reolyddion ffurf a chydrannau o fewn bar llywio gyda .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>

Elfennau plentyn ar unwaith o .navbargynllun fflecs defnydd a bydd yn ddiofyn i justify-content: space-between. Defnyddiwch gyfleustodau hyblyg ychwanegol yn ôl yr angen i addasu'r ymddygiad hwn.

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

Mae grwpiau mewnbwn yn gweithio hefyd:

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

Cefnogir botymau amrywiol fel rhan o'r ffurflenni bar llywio hyn hefyd. Mae hyn hefyd yn atgoffa wych y gellir defnyddio cyfleustodau aliniad fertigol i alinio elfennau o wahanol feintiau.

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

Testun

Gall barrau llywio gynnwys darnau o destun gyda chymorth .navbar-text. Mae'r dosbarth hwn yn addasu aliniad fertigol a bylchau llorweddol ar gyfer llinynnau testun.

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

Cymysgu a chyfateb â chydrannau a chyfleustodau eraill yn ôl yr angen.

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

Cynlluniau lliw

Nid yw thema'r bar llywio erioed wedi bod yn haws diolch i'r cyfuniad o ddosbarthiadau thema a background-colorchyfleustodau. Dewiswch o'r rhain .navbar-lighti'w defnyddio gyda lliwiau cefndir golau, neu .navbar-darkar gyfer lliwiau cefndir tywyll. Yna, addasu gyda .bg-*chyfleustodau.

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

Cynwysyddion

Er nad oes ei angen, gallwch lapio bar llywio mewn a .containeri'w ganoli ar dudalen. Neu gallwch ychwanegu cynhwysydd y tu mewn .navbari'r canoli cynnwys bar llywio sefydlog neu sefydlog yn unig .

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

Pan fydd y cynhwysydd o fewn eich bar llywio, caiff ei badin llorweddol ei dynnu mewn mannau torri sy'n is na'ch .navbar-expand{-sm|-md|-lg|-xl}dosbarth penodedig. Mae hyn yn sicrhau nad ydym yn dyblu'r padin yn ddiangen ar borthladdoedd is pan fydd eich bar llywio wedi cwympo.

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

Lleoliad

Defnyddiwch ein cyfleustodau safle i osod barrau llywio mewn safleoedd ansefydlog. Dewiswch o sefydlog i'r brig, sefydlog i'r gwaelod, neu stickied i'r brig (sgroliwch gyda'r dudalen nes ei fod yn cyrraedd y brig, yna aros yno). Mae bariau llywio sefydlog yn defnyddio position: fixed, sy'n golygu eu bod yn cael eu tynnu o lif arferol y DOM ac efallai y bydd angen CSS arferol (ee, padding-topar y <body>) arnynt i atal gorgyffwrdd ag elfennau eraill.

Sylwch hefyd fod .sticky-topdefnyddiau position: sticky, nad ydynt yn cael eu cefnogi'n llawn ym mhob porwr .

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

Sgrolio

Ychwanegu .navbar-nav-scrollat .navbar-collapse(neu is-gydran bar llywio arall) i alluogi sgrolio fertigol o fewn cynnwys togladwy bar llywio sydd wedi cwympo. Yn ddiofyn, mae sgrolio yn cychwyn ar 75vh(neu 75% o uchder y porth golygfa), ond gallwch chi ddiystyru hynny gydag arddulliau mewnol neu arferiad. Mewn pyrth gwylio mwy pan fydd y bar llywio wedi'i ehangu, bydd cynnwys yn ymddangos fel y mae mewn bar llywio rhagosodedig.

Sylwch fod yr ymddygiad hwn yn dod ag anfantais bosibl o overflow—wrth osod overflow-y: auto(mae angen sgrolio'r cynnwys yma), overflow-xyn cyfateb i auto, a fydd yn cnwd rhywfaint o gynnwys llorweddol.

Dyma enghraifft navbar yn defnyddio .navbar-nav-scrollgyda style="max-height: 100px;", gyda rhai cyfleustodau ymyl ychwanegol ar gyfer y gofod gorau posibl.

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

Ymddygiadau ymatebol

Gall Navbars ddefnyddio .navbar-toggler, .navbar-collapse, a .navbar-expand{-sm|-md|-lg|-xl}dosbarthiadau i benderfynu pryd mae eu cynnwys yn cwympo y tu ôl i fotwm. Ar y cyd â chyfleustodau eraill, gallwch chi ddewis yn hawdd pryd i ddangos neu guddio elfennau penodol.

Ar gyfer bariau llywio nad ydynt byth yn cwympo, ychwanegwch y .navbar-expanddosbarth ar y bar llywio. Ar gyfer barrau llywio sydd bob amser yn cwympo, peidiwch ag ychwanegu unrhyw .navbar-expandddosbarth.

Toglor

Mae toglwyr Navbar wedi'u halinio i'r chwith yn ddiofyn, ond pe baent yn dilyn elfen brawd neu chwaer fel .navbar-brand, byddant yn cael eu halinio'n awtomatig i'r dde eithaf. Bydd gwrthdroi eich marcio yn gwrthdroi lleoliad y togler. Isod mae enghreifftiau o wahanol arddulliau togl.

Heb unrhyw .navbar-brandddangos ar y torbwynt lleiaf:

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

Gydag enw brand i'w weld ar y chwith a toggler ar y dde:

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

Gyda toggler ar y chwith ac enw brand ar y dde:

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

Cynnwys allanol

Weithiau byddwch chi eisiau defnyddio'r ategyn cwympo i sbarduno elfen cynhwysydd ar gyfer cynnwys sydd yn strwythurol yn eistedd y tu allan i'r .navbar. Oherwydd bod ein ategyn yn gweithio ar y ida data-targetparu, mae hynny'n hawdd ei wneud!

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

Pan fyddwch chi'n gwneud hyn, rydym yn argymell cynnwys JavaScript ychwanegol i symud y ffocws yn rhaglennol i'r cynhwysydd pan fydd yn cael ei agor. Fel arall, mae'n debygol y bydd defnyddwyr bysellfwrdd a defnyddwyr technolegau cynorthwyol yn cael amser caled i ddod o hyd i'r cynnwys sydd newydd ei ddatgelu - yn enwedig os yw'r cynhwysydd a agorwyd yn dod cyn y toggler yn strwythur y ddogfen. Rydym hefyd yn argymell gwneud yn siŵr bod gan y toggler y aria-controlspriodoledd, gan bwyntio at y idcynhwysydd cynnwys. Mewn egwyddor, mae hyn yn caniatáu i ddefnyddwyr technoleg gynorthwyol neidio'n uniongyrchol o'r toggler i'r cynhwysydd y mae'n ei reoli - ond mae cefnogaeth i hyn yn eithaf anghyson ar hyn o bryd.