Verticalnav

Last update:	()
Message	fix(vertical-nav): restore status from original attribute
Committer:	rudywaltz
Version history

Default

Copy Jade

Copy HTML

Show code

Hide code

<div class="e-verticalnav">
  <e-verticalnav-menu id="verticalnav-unique-id">
    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
  </e-verticalnav-menu>
  <div class="e-verticalnav__content">
    Nisi commodo ad duis mollit amet adipiscing duis sit mollit laborum ipsum dolor ullamco cillum anim veniam dolore in minim ut do nisi exercitation ex velit minim ut esse amet deserunt culpa dolor commodo labore anim labore ipsum in pariatur commodo veniam consequat duis ut irure dolore eiusmod aliqua aute labore laboris ut id anim lorem sunt ipsum magna sunt in irure do culpa ex aute consequat sit ut officia ut qui eiusmod exercitation adipiscing cupidatat proident duis in ut dolor eiusmod do mollit occaecat sint occaecat aute aute excepteur nostrud ut labore dolor labore incididunt deserunt nulla sit dolore sint id in cupidatat pariatur magna ea exercitation velit dolor anim eu consequat ullamco cupidatat ipsum cupidatat cillum consectetur sit magna occaecat minim fugiat eu sed consequat adipiscing ut velit duis occaecat consectetur pariatur veniam lorem quis est mollit duis deserunt excepteur aliqua pariatur laboris quis in esse nisi magna proident et ea nisi magna esse nulla proident excepteur id velit sunt qui officia ea cupidatat quis anim reprehenderit in ipsum cillum cupidatat magna consequat consequat in dolor non ex pariatur laboris qui duis aliquip adipiscing nulla ex cupidatat deserunt aliquip enim laboris ut ut reprehenderit qui ut est cillum 
  </div>
</div>


                                <div class="e-verticalnav">
                                  <e-verticalnav-menu id="verticalnav-unique-id">
                                    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
                                    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
                                    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
                                  </e-verticalnav-menu>
                                  <div class="e-verticalnav__content">Veniam lorem eiusmod adipiscing exercitation exercitation esse ad officia esse eiusmod occaecat incididunt dolor consectetur ut laborum laboris in velit in velit duis deserunt dolor quis tempor ut officia ex mollit anim ut consequat sunt minim laboris minim esse amet in deserunt nulla anim anim proident do exercitation adipiscing ut ullamco ad culpa nostrud officia excepteur ea pariatur proident ex ea ut minim dolor magna laboris voluptate ad adipiscing exercitation pariatur labore id qui ad nulla amet velit adipiscing voluptate velit dolore veniam anim sed excepteur incididunt culpa cupidatat id commodo et non est excepteur magna aute dolor dolore in ex qui ipsum fugiat dolor et ut velit anim excepteur in voluptate sed ut nisi minim non occaecat sed ut excepteur mollit sit labore quis amet enim ad in nisi laboris aliquip esse dolore sit aliqua magna culpa dolore pariatur sed elit laborum ullamco et id ullamco eu fugiat nostrud est ad sit ipsum proident amet in exercitation ut lorem exercitation tempor reprehenderit incididunt consequat dolore fugiat dolor ea do culpa adipiscing laboris anim cupidatat fugiat sunt enim in tempor qui nostrud eiusmod eu deserunt sint velit exercitation sint cillum magna sit eiusmod ut anim irure et tempor occaecat excepteur 
                                  </div>
                                </div>

Ex velit fugiat reprehenderit esse officia pariatur culpa dolore voluptate ut quis qui ex ad amet aute dolore excepteur ut ex officia commodo ea in dolor dolor in in fugiat aliqua deserunt reprehenderit culpa ullamco deserunt nisi reprehenderit ullamco sit excepteur duis anim consequat dolore veniam ipsum esse anim officia eu ullamco aute consectetur ipsum dolore id commodo dolore irure duis in sint exercitation minim in culpa dolore eiusmod laboris duis ad amet sint laborum ullamco quis deserunt minim lorem cillum ut ut reprehenderit ut in proident ex proident commodo ea eiusmod do velit do in ad incididunt esse eu cupidatat aliquip enim ex dolore adipiscing aliquip magna in do cupidatat minim dolor ut fugiat et mollit ad ad pariatur adipiscing eiusmod reprehenderit incididunt elit ut cupidatat consequat in nisi incididunt consequat laboris ut proident incididunt cillum sed est in cupidatat eiusmod in qui qui sit incididunt in consequat eiusmod consequat adipiscing ad exercitation cupidatat occaecat nisi non consequat aute voluptate sed id velit proident cillum exercitation nostrud lorem cillum est sit consectetur aliquip deserunt sit magna ullamco deserunt deserunt labore non sit cillum voluptate ea labore velit enim sint cupidatat eu quis fugiat tempor amet enim nulla ut eu

Variations

Item with multiple status
Copy Jade

Copy HTML

Show code

Hide code

<div class="e-verticalnav">
  <e-verticalnav-menu status="disabled">
    <e-verticalnav-item icon="user" value="Dashboard" status="active faded" id="qwe"></e-verticalnav-item>
    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
    <e-verticalnav-item icon="e-track" status="faded" value="Link tracking"></e-verticalnav-item>
  </e-verticalnav-menu>
  <div class="e-verticalnav__content">
    Officia sed commodo officia aliquip nulla in laborum in culpa mollit magna ut veniam est ad duis labore magna excepteur adipiscing id quis ea laborum lorem lorem sed reprehenderit ex anim fugiat eiusmod aute qui anim laboris culpa velit consequat nulla quis aute cillum proident culpa nostrud sit ad duis sit laborum aute est dolor magna nulla id minim sed deserunt in eiusmod sunt elit pariatur do sed sunt fugiat reprehenderit ut dolor dolore est commodo ex in ullamco incididunt ad nisi veniam tempor in et dolore tempor culpa nisi adipiscing nisi in duis irure ut fugiat dolore magna dolor in eiusmod nulla dolor ad ut elit non laborum qui ex ut id sit aute dolore dolore eu incididunt irure nulla cupidatat do sed occaecat cupidatat sit esse cupidatat cupidatat ullamco eiusmod lorem ut laboris laborum ex id cillum ut sit mollit nisi anim nostrud commodo dolor dolore ea culpa commodo irure sit aliqua sed sed in cupidatat in eu ex dolore laboris eu dolor quis quis qui excepteur anim excepteur aliqua velit cillum do eu veniam cupidatat consectetur ullamco sint excepteur mollit ea aute et nulla tempor dolore nisi ipsum ullamco amet velit id ut pariatur ut nisi laboris 
  </div>
</div>


                                  <div class="e-verticalnav">
                                    <e-verticalnav-menu status="disabled">
                                      <e-verticalnav-item icon="user" value="Dashboard" status="active faded" id="qwe"></e-verticalnav-item>
                                      <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
                                      <e-verticalnav-item icon="e-track" status="faded" value="Link tracking"></e-verticalnav-item>
                                    </e-verticalnav-menu>
                                    <div class="e-verticalnav__content">Id lorem qui ex dolore nisi esse cupidatat reprehenderit in in esse laborum veniam exercitation ea nisi duis eu aliqua in adipiscing ipsum ex ad laboris lorem elit ut sit incididunt ex velit ea ut do commodo cillum tempor incididunt aute mollit adipiscing aute excepteur qui eiusmod reprehenderit ad occaecat adipiscing do enim voluptate sed laborum dolor sint non sed consequat adipiscing consequat sit ea dolor pariatur irure et non esse ea ut eu ex non tempor labore dolore aliqua enim excepteur ad ut exercitation dolor pariatur elit proident consectetur commodo eu aute exercitation voluptate laborum cupidatat commodo aute cillum nisi magna dolore incididunt id sed non ut reprehenderit sint est tempor adipiscing irure eu magna excepteur cupidatat occaecat reprehenderit ullamco voluptate culpa nostrud adipiscing qui deserunt cupidatat in sit consequat irure mollit labore cillum fugiat dolore dolore sunt exercitation est officia exercitation voluptate occaecat dolore id ipsum qui esse et in officia ea cupidatat ad officia qui esse dolor lorem in enim qui do exercitation eu reprehenderit ex lorem velit in ut aliqua veniam consectetur ex ea irure commodo in qui id eu laboris consequat exercitation est nisi reprehenderit aliquip sint duis in elit dolor enim ut ipsum do 
                                    </div>
                                  </div>

Ut officia sint laboris non eiusmod ut id dolor tempor sed enim magna elit fugiat anim ut ullamco anim ut eiusmod proident sit ullamco est quis eiusmod labore magna fugiat cupidatat sunt incididunt in quis id dolor cillum reprehenderit consequat labore do fugiat fugiat ut id aliqua laboris in non lorem ut id mollit ullamco ut irure consequat ullamco nisi ex esse dolor commodo cillum enim sint laboris adipiscing mollit velit tempor consequat dolore dolore sunt cupidatat eiusmod laborum cillum incididunt aute consequat adipiscing ullamco est officia ut magna ut laborum minim consectetur occaecat consequat minim exercitation officia dolor nisi mollit magna ut culpa deserunt dolore ut eiusmod in velit do ullamco in sunt laborum velit non enim ut quis mollit dolore magna ut non velit magna excepteur sunt duis ut excepteur ut aliquip occaecat ea excepteur dolore dolore et fugiat sed fugiat dolor minim eu fugiat cupidatat aute elit amet elit in eiusmod anim dolore incididunt aliquip enim incididunt ex esse laboris aliqua deserunt veniam culpa aliquip nulla qui eiusmod eiusmod elit esse velit tempor proident in eu tempor velit est qui pariatur fugiat occaecat magna amet anim excepteur sunt velit commodo lorem deserunt labore aliqua ullamco deserunt non

With title
Copy Jade

Copy HTML

Show code

Hide code

<div class="e-verticalnav">
  <e-verticalnav-menu>
    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
  </e-verticalnav-menu>
  <div class="e-verticalnav__content">
    <div class="e-verticalnav__header">
      <div class="e-verticalnav__title">
        Lorem ipsum
      </div>
    </div>
    Sint officia elit tempor eu non amet sint eu lorem consectetur esse ea officia laborum nulla minim aliqua ipsum sit laborum amet ipsum quis anim exercitation nisi lorem irure sed dolor occaecat sint eu occaecat mollit sed elit proident ea nulla consectetur consectetur culpa in adipiscing dolor eu veniam in amet excepteur sit ea excepteur adipiscing velit dolore magna sunt velit velit voluptate deserunt incididunt quis ullamco nostrud in non duis id elit reprehenderit lorem elit tempor amet aliqua dolor sit fugiat commodo aliqua proident velit laborum sunt ullamco amet excepteur sint sint dolore deserunt ullamco id id nisi fugiat elit enim qui amet ut dolore laboris dolor excepteur ut aute laborum reprehenderit sunt ad officia aliqua lorem sint dolore irure dolore veniam dolor ut enim laboris nulla irure irure dolore sed velit veniam dolor commodo commodo ad ut minim sint incididunt magna aliquip quis sit sed dolor non occaecat est elit veniam occaecat nisi irure irure lorem adipiscing incididunt nulla tempor veniam dolor dolore occaecat culpa nostrud mollit id id sint velit id aliqua sit ullamco deserunt ut exercitation velit do pariatur non occaecat aliquip occaecat ut tempor in tempor quis in qui ea ut minim nostrud minim dolore 
  </div>
</div>


                                  <div class="e-verticalnav">
                                    <e-verticalnav-menu>
                                      <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
                                      <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
                                      <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
                                    </e-verticalnav-menu>
                                    <div class="e-verticalnav__content">
                                      <div class="e-verticalnav__header">
                                        <div class="e-verticalnav__title">Lorem ipsum</div>
                                      </div>Mollit velit voluptate aliquip laborum aliqua eiusmod occaecat do nisi amet quis incididunt sit cupidatat mollit enim qui eu eu nisi sit ullamco voluptate nisi occaecat proident ea id laboris nostrud aute eu sit ut reprehenderit incididunt consequat incididunt consequat voluptate quis laborum sed dolore labore sint do eu quis enim nulla incididunt est dolor occaecat velit dolor officia laboris magna aliquip consectetur duis culpa tempor do aliqua sint amet ea cillum tempor minim in consequat exercitation nulla officia velit sunt sed et occaecat aliqua ea incididunt ullamco incididunt tempor nulla incididunt cupidatat aliqua aliqua consectetur sit consequat irure deserunt excepteur reprehenderit pariatur esse sint incididunt adipiscing nulla qui magna mollit esse ut ex deserunt sed laboris lorem esse incididunt dolore ex aliqua ipsum minim elit cillum aliquip officia adipiscing eu fugiat incididunt lorem in dolor est laboris mollit commodo irure in exercitation et et nulla eiusmod laboris lorem velit et velit consectetur aliquip esse aute occaecat dolore in amet officia aliquip cupidatat fugiat dolor dolor voluptate est occaecat aute nisi cupidatat esse et pariatur incididunt incididunt labore adipiscing veniam ad anim dolor in ut laborum minim fugiat ullamco adipiscing consectetur ut ipsum ad qui in labore tempor reprehenderit do 
                                    </div>
                                  </div>

In nostrud fugiat nulla laborum aliquip ullamco ea laborum pariatur laborum cillum occaecat est nostrud in do proident laboris nisi dolor voluptate commodo velit sunt ut laboris id dolor nostrud adipiscing ullamco sit non commodo nostrud consequat in aliquip aliquip culpa consequat irure do dolor mollit irure dolore ut dolore nulla elit consectetur dolore ad enim laborum consequat fugiat occaecat nostrud proident ut fugiat in laborum adipiscing in sed aute consequat eiusmod reprehenderit incididunt voluptate anim officia irure veniam sed est mollit magna labore occaecat labore ipsum eiusmod est do eu eu exercitation qui ullamco tempor ad est nulla ea lorem sunt sint adipiscing esse labore nulla proident in sed elit esse pariatur ea sit sunt cillum qui fugiat reprehenderit eu tempor ut cupidatat consectetur officia ex laboris exercitation cupidatat laboris aliqua fugiat qui qui do tempor non incididunt deserunt ullamco minim incididunt in culpa aliqua dolor in voluptate pariatur ex amet nulla amet incididunt irure exercitation aliquip incididunt ut officia elit excepteur ut amet culpa magna cupidatat qui ea cupidatat ullamco do ut ut ullamco eiusmod culpa nostrud velit consequat adipiscing magna quis incididunt fugiat sint sint proident laboris veniam laboris ullamco do elit amet in reprehenderit commodo commodo

With title and buttons
Copy Jade

Copy HTML

Show code

Hide code

<div class="e-verticalnav">
  <e-verticalnav-menu>
    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
  </e-verticalnav-menu>
  <div class="e-verticalnav__content">
    <div class="e-verticalnav__header">
      <div class="e-verticalnav__title">
        Lorem ipsum
      </div>
      <div class="e-verticalnav__actions e-buttongroup">
        <button type="button" class="e-btn">
          Button1
        </button>
        <button type="button" class="e-btn">
          Button2
        </button>
      </div>
    </div>
    Aliquip laborum excepteur ut irure irure elit fugiat aliquip et esse dolor ad aute sint anim eu enim nostrud aliquip fugiat cillum cillum ut cillum in et duis commodo ad ex cupidatat veniam eu sed fugiat nulla voluptate dolor nostrud sint do dolor lorem lorem laborum eu laborum aliqua in mollit id ullamco sunt lorem voluptate aliqua aute cillum sit cillum lorem do voluptate anim in laborum ad officia duis adipiscing do laboris officia ut quis commodo non dolore ut pariatur commodo nulla sunt enim sed laboris sint consectetur voluptate anim anim aliqua est nostrud commodo ad et id elit id officia laborum deserunt ipsum aliquip mollit ut deserunt magna qui adipiscing incididunt enim ut dolore in laborum ad labore do sint cupidatat eu in est nostrud ea qui quis pariatur occaecat excepteur ullamco eu nisi amet anim sed culpa consequat irure ipsum ea minim laboris dolor do duis esse cillum labore ipsum lorem ex ipsum pariatur pariatur adipiscing duis reprehenderit consequat dolor eu labore aliqua incididunt sit lorem dolore non do consectetur ipsum officia enim veniam veniam ut reprehenderit consequat officia quis occaecat dolore veniam est laboris ea in ad est eiusmod et reprehenderit excepteur exercitation consequat ipsum in 
  </div>
</div>


                                  <div class="e-verticalnav">
                                    <e-verticalnav-menu>
                                      <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
                                      <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
                                      <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
                                    </e-verticalnav-menu>
                                    <div class="e-verticalnav__content">
                                      <div class="e-verticalnav__header">
                                        <div class="e-verticalnav__title">Lorem ipsum</div>
                                        <div class="e-verticalnav__actions e-buttongroup">
                                          <button type="button" class="e-btn">Button1</button>
                                          <button type="button" class="e-btn">Button2</button>
                                        </div>
                                      </div>Dolor aliqua magna occaecat sit amet magna commodo ad do aliqua ex dolore velit lorem consectetur duis magna fugiat eu anim dolor do in esse in dolor dolore dolor qui exercitation exercitation ut est minim minim duis labore nulla duis labore in irure deserunt culpa eu dolore in culpa pariatur nulla aute cillum laboris labore est sed voluptate sed exercitation dolor eu commodo mollit ut in veniam dolore eiusmod amet et incididunt sunt sed culpa commodo aute ad ipsum esse id ex magna aliquip pariatur veniam cupidatat dolore reprehenderit reprehenderit sint excepteur minim eu deserunt ut laborum veniam aliquip excepteur elit eiusmod in excepteur nostrud lorem nulla excepteur enim do fugiat non et nisi ullamco adipiscing in culpa occaecat ad pariatur laborum excepteur mollit ut ullamco in duis enim dolor et aliqua labore irure eu consectetur aliquip do laboris non dolore commodo ut cupidatat ad aliquip id velit nulla eiusmod dolore ad amet magna dolor dolor qui duis ut do adipiscing sunt proident commodo amet nisi aute sunt ipsum labore nostrud velit sunt ullamco aliquip veniam id elit eiusmod ex dolore incididunt do eiusmod laboris ad laborum ut dolore dolore est nostrud adipiscing ad officia sit proident elit sed velit 
                                    </div>
                                  </div>

In esse quis nostrud fugiat irure laboris occaecat dolore dolor do sint eiusmod commodo minim in adipiscing occaecat tempor nisi sed esse excepteur laborum commodo labore anim nostrud esse proident ut exercitation excepteur in consequat est cupidatat esse qui ad sunt culpa ullamco sit veniam sed cillum tempor reprehenderit sit qui culpa in voluptate cupidatat incididunt commodo eiusmod in cillum id ex eu in aliqua ut elit ad reprehenderit dolore eiusmod aliqua enim enim laboris aute eu consequat incididunt nisi sunt anim incididunt aliqua ut pariatur dolor esse irure ut aliquip amet nostrud in velit in dolor deserunt nisi veniam mollit ipsum laboris pariatur occaecat ex mollit aute eu ad ut magna quis mollit cillum deserunt deserunt incididunt fugiat irure fugiat amet anim velit id ut in non lorem proident consectetur pariatur ut ullamco proident exercitation aute ipsum enim voluptate aliqua dolor ad labore ullamco consequat dolore eu anim voluptate in aliqua magna cupidatat do ut ut tempor aliqua sint amet eu ut non elit qui labore ut ex anim minim non qui amet consectetur quis proident do in do cupidatat mollit nostrud sint dolore quis nostrud mollit lorem ullamco commodo magna reprehenderit elit ut eu non velit aliquip et

Fullheight
Copy Jade

Copy HTML

Show code

Hide code
.e-verticalnav-fullheight

<div class="e-verticalnav e-verticalnav-fullheight">
  <e-verticalnav-menu>
    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
  </e-verticalnav-menu>
  <div class="e-verticalnav__content">
    <div class="e-verticalnav__header">
      <div class="e-verticalnav__title">
        Lorem ipsum
      </div>
    </div>
    Nisi duis culpa velit enim dolor officia minim magna ullamco lorem duis fugiat dolor irure in magna duis occaecat cupidatat anim id esse ut est irure tempor non anim duis ad lorem lorem officia sint labore ipsum eiusmod est aliqua aliquip in aute ut ut sed irure ullamco fugiat officia cillum nisi amet dolore dolore occaecat sit est ex ullamco aliquip sunt adipiscing laborum nostrud nostrud in non esse culpa laborum sint in eiusmod quis eu ipsum laboris dolor irure sint esse officia anim in officia tempor velit commodo incididunt sunt officia laboris ad quis cupidatat occaecat dolore in non ipsum reprehenderit ad cupidatat pariatur laborum minim aute duis esse qui in id ut cupidatat in dolor incididunt ipsum sunt do ut duis aliquip velit dolore dolor quis laborum do aliqua dolore occaecat do amet magna mollit laborum id labore ut laborum adipiscing labore minim aliqua sed incididunt tempor do aute enim eu qui amet tempor eu quis nostrud eiusmod quis irure dolor ea nulla consequat nisi sit occaecat enim ut amet ut sint esse qui mollit officia ex ad adipiscing labore sint nisi dolore ut aliquip reprehenderit aute laborum aliqua et aute ut non reprehenderit ex occaecat consectetur enim 
  </div>
</div>


                                  <div class="e-verticalnav e-verticalnav-fullheight">
                                    <e-verticalnav-menu>
                                      <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
                                      <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
                                      <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
                                    </e-verticalnav-menu>
                                    <div class="e-verticalnav__content">
                                      <div class="e-verticalnav__header">
                                        <div class="e-verticalnav__title">Lorem ipsum</div>
                                      </div>Id do voluptate ut aliqua velit esse reprehenderit dolor ut et excepteur nostrud aute eu pariatur sint enim do nulla culpa commodo magna ex officia sed in consequat velit in ullamco laboris nisi tempor velit duis esse officia cillum in ullamco irure cillum ea magna ex pariatur aliqua qui commodo ut occaecat cupidatat incididunt laboris eiusmod culpa commodo incididunt mollit laboris nulla laborum officia amet ut culpa non est qui consequat anim nostrud veniam sit voluptate reprehenderit sit qui labore occaecat irure minim cillum fugiat ullamco proident velit aliqua aute ut ut anim mollit do adipiscing labore eu ullamco dolor consequat esse irure non magna veniam reprehenderit quis dolor magna tempor consectetur sed id elit et nostrud ex ut aute consectetur laboris deserunt est ullamco ex et ut in commodo eiusmod dolor nulla laboris ex in amet culpa in dolore aute aute id irure ex sed adipiscing duis qui consectetur aliquip amet deserunt ut exercitation ea consequat laboris id nostrud occaecat qui officia ut consectetur tempor esse reprehenderit ut magna consequat aute tempor anim commodo sit dolore ut elit cillum tempor ipsum ut anim dolor eiusmod ipsum veniam pariatur sint labore culpa aliquip veniam mollit cupidatat deserunt exercitation officia dolor 
                                    </div>
                                  </div>

Amet anim do esse aute officia ex elit veniam est quis ex cillum minim sunt dolore fugiat aute voluptate incididunt cillum in aliquip lorem voluptate commodo tempor exercitation exercitation elit amet labore eu qui nisi labore adipiscing in sit in adipiscing labore consectetur fugiat nulla reprehenderit commodo commodo fugiat sed laboris eu est lorem proident exercitation incididunt veniam cupidatat velit adipiscing ipsum dolore aliquip magna ea amet consequat proident deserunt labore dolor occaecat ullamco aliqua ea incididunt minim eu nulla tempor veniam laboris proident aliqua elit sunt dolor lorem proident sed culpa minim ut est est eiusmod fugiat cupidatat excepteur fugiat esse laborum mollit dolor veniam est est reprehenderit ex fugiat consequat aliquip aute in duis do dolore aliquip deserunt est officia dolore dolor in proident aliqua magna adipiscing nostrud incididunt ut est anim cillum et labore nulla sed sed sint cillum ad non exercitation lorem commodo dolore sit in labore et minim exercitation dolor est in in est veniam sit qui proident sed dolore enim amet dolore consectetur occaecat sit nulla veniam mollit adipiscing nostrud velit elit elit sit eiusmod voluptate esse dolor veniam laborum tempor enim irure enim ad labore occaecat sed mollit nisi sed in aliqua in

Nopadding
Copy Jade

Copy HTML

Show code

Hide code
.e-verticalnav__content-nopadding

<div class="e-verticalnav e-verticalnav-fullheight">
  <e-verticalnav-menu>
    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
  </e-verticalnav-menu>
  <div class="e-verticalnav__content e-verticalnav__content-nopadding">
    Do excepteur ad nulla consequat irure ex sunt minim cupidatat in id mollit ad laborum consequat excepteur enim minim cupidatat consectetur velit ut ea in cillum mollit occaecat ex consequat ut quis id in adipiscing ad occaecat eu sunt dolor consequat ut anim do in velit dolore in dolor dolor nisi deserunt dolore irure incididunt excepteur aute do eiusmod ut nulla ut commodo ut eiusmod incididunt labore quis ut commodo sit velit cillum adipiscing incididunt deserunt deserunt excepteur magna et quis deserunt enim aliqua irure quis ex sed sit laboris in nisi duis voluptate qui sunt incididunt enim et voluptate nostrud non in voluptate eu nisi lorem veniam dolor veniam aute do est aliquip elit minim cillum in cupidatat labore ullamco exercitation consequat ut voluptate tempor laborum minim anim ullamco dolore in consectetur nulla eu dolore laborum ea aliqua sunt et sunt adipiscing magna fugiat exercitation dolore fugiat in laboris consequat consequat pariatur lorem est nostrud dolor incididunt lorem ut non adipiscing fugiat dolore fugiat eu dolor labore anim et dolor laboris anim sint duis sint magna commodo eiusmod cillum ut tempor adipiscing ut consequat in sunt ut quis eu veniam occaecat ut cupidatat pariatur laboris ut fugiat minim proident 
  </div>
</div>


                                  <div class="e-verticalnav e-verticalnav-fullheight">
                                    <e-verticalnav-menu>
                                      <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
                                      <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
                                      <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
                                    </e-verticalnav-menu>
                                    <div class="e-verticalnav__content e-verticalnav__content-nopadding">Sint eiusmod cupidatat aliquip nulla culpa magna velit eu dolore quis aliqua nostrud veniam velit et esse aliqua ex commodo officia aliqua veniam ea dolor veniam cillum laboris elit nulla exercitation adipiscing ea anim aute id et nostrud fugiat ut tempor aliqua nulla eu dolor reprehenderit ullamco culpa ut magna in labore minim sint tempor qui magna dolore mollit culpa dolore commodo consequat ut enim eiusmod est enim aliqua culpa sunt voluptate quis ut est incididunt voluptate commodo cillum eu adipiscing commodo laboris voluptate ad et tempor cupidatat qui amet excepteur eiusmod nisi eiusmod sit minim laboris ullamco aute aute veniam in dolore sed fugiat velit adipiscing ut ex tempor in ad officia dolore ullamco culpa ut est pariatur dolore ad cillum non eu in pariatur id dolore elit sint veniam incididunt duis irure ut qui elit in dolor in ut ut laborum proident consectetur aliqua qui sunt exercitation pariatur laboris in cupidatat sed eiusmod ipsum dolor cupidatat excepteur velit magna velit aliquip consectetur adipiscing nisi velit minim tempor duis ea ullamco aliqua sed consectetur sit deserunt duis sed tempor anim sed ullamco duis voluptate enim sunt eu est veniam ullamco do enim mollit aliquip reprehenderit in amet ullamco dolor 
                                    </div>
                                  </div>

Deserunt eiusmod ut incididunt esse cupidatat ad ut amet incididunt cillum eiusmod occaecat anim labore laborum deserunt ut eiusmod aliqua sit ut ullamco veniam voluptate in nostrud et nulla voluptate ipsum proident ad ex do incididunt dolore elit magna proident commodo magna dolore occaecat enim occaecat in officia non duis duis aute eiusmod qui sed ut deserunt consequat excepteur lorem eiusmod exercitation sed exercitation commodo eu exercitation nulla in culpa do aliquip ipsum incididunt culpa occaecat occaecat in do dolor adipiscing enim aute dolor eiusmod ex consectetur do excepteur velit aliquip magna cupidatat ullamco eiusmod minim ipsum nulla deserunt ullamco laborum ut dolor laboris in exercitation anim consequat amet adipiscing et in esse nulla consequat exercitation sunt enim consequat exercitation aliquip sint eiusmod laborum enim consequat culpa quis eiusmod non sed ullamco sint laboris deserunt aute do esse laborum nisi officia quis eu cillum culpa id nisi in in dolore cillum commodo exercitation qui mollit et pariatur commodo irure ad laboris dolor laboris ut cillum in non ex eiusmod qui occaecat cillum sunt fugiat id reprehenderit in est in consectetur proident tempor duis elit cillum sed ullamco et ea ullamco qui pariatur veniam magna in exercitation qui non quis velit

Without toggle button
Copy Jade

Copy HTML

Show code

Hide code
no-toggle

<div class="e-verticalnav">
  <e-verticalnav-menu no-toggle>
    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
  </e-verticalnav-menu>
  <div class="e-verticalnav__content">
    <div class="e-verticalnav__header">
      <div class="e-verticalnav__title">
        Lorem ipsum
      </div>
    </div>
    Proident exercitation aliqua sint sed ea sint cupidatat elit ex mollit proident et veniam do eu sint dolor in laborum do duis elit duis amet anim dolore tempor elit mollit enim adipiscing eu labore ullamco mollit qui officia laboris sunt duis eiusmod elit amet sed culpa exercitation duis qui ut reprehenderit quis nisi fugiat irure tempor tempor exercitation mollit ullamco quis aliquip ut culpa ad irure non eu incididunt fugiat in aute commodo dolore sunt pariatur ipsum sint amet adipiscing commodo ut ut consectetur est commodo magna velit laborum ad sint in dolore duis adipiscing dolore nostrud labore ad nisi mollit pariatur fugiat ipsum ad dolor dolor ea occaecat pariatur ad consectetur amet lorem eu est ea do sint enim deserunt in nulla in ad voluptate dolore excepteur consectetur incididunt duis sit quis sunt ea amet reprehenderit reprehenderit dolore nulla deserunt deserunt exercitation in fugiat cillum fugiat mollit laborum cupidatat aliqua tempor dolor est sit nostrud sit dolor sit exercitation et in sunt esse occaecat esse amet dolor aute eu adipiscing laboris tempor proident dolor enim dolore ea labore occaecat adipiscing laborum in ex consectetur elit duis duis exercitation magna sed anim nulla culpa sit id dolor eiusmod irure dolore 
  </div>
</div>


                                  <div class="e-verticalnav">
                                    <e-verticalnav-menu no-toggle>
                                      <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
                                      <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
                                      <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
                                    </e-verticalnav-menu>
                                    <div class="e-verticalnav__content">
                                      <div class="e-verticalnav__header">
                                        <div class="e-verticalnav__title">Lorem ipsum</div>
                                      </div>Cillum ea ut ut quis eiusmod incididunt quis labore id qui ea sint officia ex elit enim anim non pariatur pariatur non mollit consectetur sint commodo ut excepteur non excepteur eiusmod aliqua quis laboris pariatur nostrud reprehenderit exercitation amet pariatur eu sed quis anim anim cupidatat non minim dolore non in ipsum sit aliqua pariatur dolore in irure dolor sint deserunt fugiat dolor ad aliqua dolor enim minim ullamco dolore pariatur in mollit ut ut ipsum laborum duis lorem sit commodo do nostrud duis dolore dolore velit fugiat nulla irure quis irure ipsum qui voluptate tempor commodo eiusmod fugiat id nulla aute ut veniam velit ad nulla id in amet magna in deserunt magna cupidatat ea ut pariatur commodo officia ad nulla et eu ipsum deserunt non sint in sit eiusmod ex dolore ut nisi do in duis laboris do in nostrud do mollit dolor veniam consectetur ea enim dolore dolore commodo magna consequat occaecat dolore consectetur duis sunt incididunt eiusmod dolore nisi dolor labore sint reprehenderit aliquip exercitation est labore sit in sint in minim sed eu laboris et velit magna aute eiusmod do officia ex sunt tempor ea do aute ullamco dolore lorem dolor officia sint duis ut 
                                    </div>
                                  </div>

Occaecat velit cillum dolore deserunt nulla commodo nulla velit cillum sint enim do est consequat elit duis voluptate tempor id ea ex dolore aliquip ad dolor sit cillum ea cupidatat culpa deserunt laboris duis dolore veniam irure laborum aliquip ea dolor veniam irure laborum dolor voluptate ad do cillum amet nostrud pariatur proident incididunt esse ipsum amet ut amet eiusmod dolore nisi et pariatur labore est enim ex nostrud sint nisi minim culpa minim dolor consequat velit elit amet aliqua excepteur nostrud enim consequat dolor nostrud quis labore labore ad qui sed amet voluptate et enim cillum labore in laborum excepteur officia cupidatat id velit enim tempor reprehenderit occaecat culpa incididunt voluptate cillum magna sint ipsum consequat qui commodo nostrud duis cillum et laborum consectetur magna do enim dolore incididunt est irure ullamco do velit ipsum tempor officia ut in id reprehenderit excepteur dolor non consectetur incididunt id cupidatat aute ut sunt et lorem adipiscing excepteur cillum anim eiusmod dolor nisi cillum cillum est ex in labore proident amet dolore labore ut nostrud ad aliquip eu sed adipiscing cillum officia duis sed amet est consequat do ut enim incididunt qui id eu lorem pariatur dolore et tempor velit cupidatat eiusmod

Condensed
Copy Jade

Copy HTML

Show code

Hide code
.e-verticaltab-condensed

<div class="e-verticalnav e-verticalnav-condensed">
  <e-verticalnav-menu id="verticalnav-unique-id">
    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
  </e-verticalnav-menu>
  <div class="e-verticalnav__content">
    Enim mollit voluptate irure in elit magna lorem magna laborum nulla quis minim aliqua ea exercitation fugiat excepteur fugiat enim dolor deserunt dolor ipsum minim laboris ut sed ut deserunt consectetur consequat ex labore irure fugiat ut sint sunt ullamco anim tempor anim ad occaecat occaecat tempor irure sint amet est deserunt proident aliquip aliquip quis officia ad eiusmod quis sit nisi pariatur adipiscing laborum in labore id consectetur reprehenderit adipiscing duis dolore ut est in anim anim in ex enim esse cupidatat dolore consequat consectetur reprehenderit sed aliquip in ad aliqua incididunt id cupidatat eu velit excepteur eiusmod dolor velit occaecat irure quis pariatur commodo cillum voluptate ut deserunt anim ut esse dolor dolore veniam quis proident cillum in deserunt et excepteur id enim culpa ut ipsum fugiat id ad sit sit in nulla cupidatat ullamco sit deserunt nulla fugiat laborum sit in excepteur sed in voluptate esse magna voluptate non in tempor irure veniam voluptate velit dolore ex veniam laborum ut quis in in dolor in qui exercitation aliqua pariatur magna id id pariatur consequat aliqua ut exercitation culpa cillum ut magna do veniam qui irure cillum quis in ut adipiscing eiusmod aute labore do ex pariatur esse 
  </div>
</div>


                                <div class="e-verticalnav e-verticalnav-condensed">
                                  <e-verticalnav-menu id="verticalnav-unique-id">
                                    <e-verticalnav-item icon="user" value="Dashboard" status="active" id="qwe"></e-verticalnav-item>
                                    <e-verticalnav-item icon="mobile" value="Mobile reporting" status="disabled"></e-verticalnav-item>
                                    <e-verticalnav-item icon="e-track" value="Link tracking"></e-verticalnav-item>
                                  </e-verticalnav-menu>
                                  <div class="e-verticalnav__content">Sunt dolore aute sint commodo reprehenderit aute elit ut ullamco dolor minim sed sed et occaecat enim ut do nulla sit pariatur quis ut culpa consequat tempor pariatur amet sint dolore id lorem tempor id elit commodo sed cupidatat exercitation id qui dolor magna fugiat cillum amet sit culpa veniam dolor elit est officia adipiscing in culpa commodo in duis magna ad aliquip laborum anim fugiat cupidatat qui consectetur in consectetur est aliquip excepteur veniam in ad in culpa ad occaecat dolor sit laborum proident sed velit labore deserunt incididunt in nostrud sit dolor dolor nostrud sunt est non lorem cillum minim do amet magna anim laboris sunt do nulla laboris culpa incididunt sit eu do ut ea excepteur occaecat ipsum dolore ut sint ad eiusmod minim enim sint ea aliqua anim pariatur ea anim et ex in officia deserunt irure veniam consequat dolore quis cillum sint id enim qui cillum magna amet excepteur sit do culpa laboris labore amet quis lorem ut eiusmod mollit qui esse deserunt tempor ut sint culpa eu non incididunt laborum id elit exercitation officia consectetur nostrud in aliqua cupidatat dolore incididunt ipsum ea excepteur elit quis ut laborum dolor officia deserunt cillum sit adipiscing 
                                  </div>
                                </div>

Est laborum cupidatat est ut aliqua excepteur sed est pariatur ut sit sint in excepteur adipiscing nulla officia laboris sed cupidatat ex ex enim consequat reprehenderit et anim laborum sit in occaecat eiusmod quis magna nisi proident in id in qui cupidatat do veniam anim nulla ut incididunt veniam in cupidatat commodo exercitation dolore do dolor ad deserunt in adipiscing minim non in occaecat pariatur in qui ut et aliquip tempor pariatur dolore est ex proident cillum sit eu anim aliqua proident consectetur anim amet culpa laborum non non cupidatat magna elit voluptate lorem ipsum ut ipsum non in nisi elit mollit veniam occaecat minim ipsum dolor sed irure in voluptate nostrud deserunt sunt et ea occaecat in elit reprehenderit mollit mollit veniam incididunt laborum lorem voluptate in reprehenderit aute qui reprehenderit velit ad voluptate esse ipsum nulla irure cupidatat anim quis tempor et in ad exercitation et deserunt ut proident laboris exercitation nulla aliquip pariatur officia in consectetur sed est laborum anim dolore ut consequat in dolor magna culpa duis elit occaecat quis lorem anim reprehenderit culpa incididunt elit minim deserunt dolore ex sunt ut fugiat in duis eu mollit eiusmod ex esse dolor et deserunt duis commodo laborum

Angular example
Copy Jade

Copy HTML

Show code

Hide code

<div ng-app>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <div class="e-verticalnav">
    <e-verticalnav-menu id="verticalnav-unique-id">
      <e-verticalnav-item icon="user" value="Dashboard" status="{{ !page || page == 'test1' ? 'active' : ''}}" id="qwe" ng-click="page = 'test1'"></e-verticalnav-item>
      <e-verticalnav-item icon="mobile" status="{{ page == 'test2' ? 'active' : ''}}" value="Mobile reporting" ng-click="page = 'test2'"></e-verticalnav-item>
      <e-verticalnav-item icon="e-track" status="{{ page == 'test3' ? 'active' : ''}}" value="Link tracking" ng-click="page = 'test3'"></e-verticalnav-item>
    </e-verticalnav-menu>
    <div ng-if="!page || page == 'test1'" class="e-verticalnav__content">
      <div class="e-verticalnav__header">
        <div class="e-verticalnav__title">
          Tab 01
        </div>
      </div>
      Elit labore commodo nostrud nulla aliquip nulla nisi consectetur occaecat commodo incididunt dolor anim culpa nulla culpa consequat dolor consectetur in dolore proident ut lorem eiusmod veniam excepteur proident ipsum ipsum ullamco fugiat sed cillum quis exercitation velit sit exercitation irure voluptate duis consequat cillum in anim irure et enim aute proident consequat nulla eiusmod tempor laboris sint cillum in anim laborum ut dolor dolore enim proident minim nisi nisi consequat cupidatat dolor proident commodo cillum duis in duis mollit eiusmod veniam in culpa in sed dolore elit aliquip reprehenderit occaecat eiusmod lorem exercitation proident irure ad dolore fugiat dolor excepteur aliquip dolor excepteur irure dolor occaecat laboris proident pariatur cupidatat id dolore eu reprehenderit et ullamco proident sed elit in enim aliquip laboris ut voluptate id ullamco tempor commodo ad culpa veniam eiusmod cupidatat ipsum sed sed est eiusmod irure mollit anim elit consequat non nisi nisi excepteur ea lorem in est sed commodo ullamco do ut do tempor qui in duis ex eu tempor consectetur do ex deserunt adipiscing consectetur incididunt tempor ut duis id laboris labore excepteur consequat pariatur excepteur anim cupidatat anim ea nulla incididunt dolor laboris consequat duis consectetur laboris fugiat velit reprehenderit anim laboris 
    </div>
    <div ng-if="page == 'test2'" class="e-verticalnav__content">
      <div class="e-verticalnav__header">
        <div class="e-verticalnav__title">
          Tab 02
        </div>
      </div>
      Mollit culpa ex lorem sed aute esse dolor ea ad mollit tempor duis amet magna irure occaecat magna officia fugiat aliqua sit anim sed sunt labore quis in sint ut est non ut exercitation anim lorem cillum aute officia dolore eu culpa sunt elit minim sint ullamco ullamco dolor minim ad enim consequat dolor ut culpa commodo proident amet nulla commodo duis fugiat ut labore ex in eiusmod amet aliquip anim enim excepteur irure dolore sint est proident irure esse proident commodo enim in qui lorem et nisi lorem sit elit non magna qui nisi in do reprehenderit sit non ad mollit ad dolor veniam dolore commodo mollit do labore ut amet elit ipsum id velit exercitation in magna excepteur aliqua ut velit id do nostrud irure eu ea dolore tempor non officia est occaecat sed sed elit ad sunt ea esse commodo sunt pariatur aliquip eu culpa nulla laborum elit laboris cillum aliqua enim dolore eu irure ut cillum adipiscing ea culpa nostrud cupidatat occaecat et dolore consectetur est non est duis laboris cillum pariatur incididunt mollit officia ea tempor ut dolor id labore ea amet non id aliquip aliquip elit commodo dolore veniam sint dolor lorem minim et 
    </div>
    <div ng-if="page == 'test3'" class="e-verticalnav__content">
      <div class="e-verticalnav__header">
        <div class="e-verticalnav__title">
          Tab 03
        </div>
      </div>
      Exercitation sunt laborum voluptate dolore elit magna enim ut ea commodo laboris sunt laborum in eu consectetur velit nisi nisi dolore culpa dolore proident dolore dolore velit nulla laborum laborum tempor ex sint duis amet deserunt nisi reprehenderit tempor velit quis incididunt dolore sint fugiat magna commodo aliquip in ullamco anim dolor lorem pariatur et dolore quis cupidatat qui ullamco exercitation ad aliquip anim culpa ut ipsum in dolor laborum velit dolor voluptate dolor esse cupidatat ipsum cillum id lorem aute dolore dolor voluptate ad tempor magna et elit adipiscing proident id exercitation ad amet in sed officia deserunt dolor non excepteur aute est excepteur elit esse fugiat minim nostrud sunt excepteur ut ullamco dolore non quis officia do enim nisi veniam sit lorem voluptate labore labore duis qui minim veniam velit sint in anim incididunt non culpa enim enim in ad laboris esse consequat do anim aliqua sed sint exercitation sint sed in dolor mollit proident ex voluptate sunt laboris duis ad in nostrud in in consectetur elit commodo nisi consequat consectetur et cillum ut esse officia velit excepteur aliqua eu dolore exercitation dolor mollit ut exercitation ut id sit in sint exercitation laborum dolore sint culpa dolore ut 
    </div>
  </div>
</div>


                                <div ng-app>
                                  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
                                  <div class="e-verticalnav">
                                    <e-verticalnav-menu id="verticalnav-unique-id">
                                      <e-verticalnav-item icon="user" value="Dashboard" status="{{ !page || page == 'test1' ? 'active' : ''}}" id="qwe" ng-click="page = 'test1'"></e-verticalnav-item>
                                      <e-verticalnav-item icon="mobile" status="{{ page == 'test2' ? 'active' : ''}}" value="Mobile reporting" ng-click="page = 'test2'"></e-verticalnav-item>
                                      <e-verticalnav-item icon="e-track" status="{{ page == 'test3' ? 'active' : ''}}" value="Link tracking" ng-click="page = 'test3'"></e-verticalnav-item>
                                    </e-verticalnav-menu>
                                    <div ng-if="!page || page == 'test1'" class="e-verticalnav__content">
                                      <div class="e-verticalnav__header">
                                        <div class="e-verticalnav__title">Tab 01</div>
                                      </div>Ut esse anim voluptate sunt ut commodo dolore laborum nisi ut fugiat consequat ipsum commodo pariatur esse sint veniam laboris ut fugiat do anim nisi reprehenderit reprehenderit enim excepteur exercitation sed excepteur aliquip do in officia velit nisi irure anim sunt sunt dolore in ut cupidatat reprehenderit aliquip ut anim anim incididunt dolore eiusmod in id cillum eiusmod sit ut quis deserunt sit ut reprehenderit magna occaecat cupidatat sed nulla id fugiat ipsum nulla esse in labore proident cillum sunt esse sit eu mollit in dolor irure quis in cillum incididunt magna occaecat in esse eu deserunt adipiscing ad ea proident aliqua voluptate dolore in ut ut sint sit exercitation laboris eiusmod nulla velit in fugiat sunt excepteur eiusmod do aute magna laborum et eu sed mollit et incididunt aliquip commodo cupidatat pariatur nisi fugiat voluptate irure pariatur do velit fugiat dolor incididunt culpa consectetur sunt in exercitation cillum dolor sed qui incididunt cupidatat fugiat adipiscing pariatur consequat lorem ipsum veniam exercitation minim ad tempor nulla sit fugiat lorem lorem aute aliqua amet non qui dolor laborum tempor fugiat id ipsum in excepteur voluptate sunt cillum nulla et velit tempor exercitation esse veniam qui eiusmod in officia elit amet exercitation 
                                    </div>
                                    <div ng-if="page == 'test2'" class="e-verticalnav__content">
                                      <div class="e-verticalnav__header">
                                        <div class="e-verticalnav__title">Tab 02</div>
                                      </div>Laborum culpa dolore do quis magna aute sed ullamco minim irure aliqua minim occaecat ea sit lorem et laborum do reprehenderit incididunt in fugiat culpa elit enim id magna amet veniam minim exercitation sint non consectetur in excepteur aute magna exercitation est amet anim quis occaecat exercitation aliquip id elit ut proident aliqua dolore irure dolor ea excepteur ipsum officia nulla aute non in ullamco ut id id proident in ut sed deserunt aute exercitation dolore non laborum dolore velit ipsum eu sunt amet dolor excepteur velit adipiscing laborum culpa lorem anim sed do qui fugiat exercitation ex elit eu voluptate deserunt eu consectetur ut aute ut incididunt deserunt laboris culpa velit id in elit pariatur ut sit duis irure nisi exercitation quis anim adipiscing ut ut in nulla nostrud esse eiusmod eu ipsum velit esse dolore enim dolor ullamco laborum ipsum do laboris amet deserunt laborum in sunt officia ea reprehenderit esse sint sint id commodo eiusmod nulla duis incididunt laboris deserunt nostrud ut quis laboris eu veniam ut occaecat cupidatat ipsum sed tempor consequat do ut labore amet laborum amet veniam excepteur elit adipiscing aute non tempor sunt non id veniam eiusmod commodo sint culpa irure commodo sed 
                                    </div>
                                    <div ng-if="page == 'test3'" class="e-verticalnav__content">
                                      <div class="e-verticalnav__header">
                                        <div class="e-verticalnav__title">Tab 03</div>
                                      </div>Aliquip ut cupidatat commodo id sint laborum laborum reprehenderit ipsum pariatur id cupidatat consectetur ut ea velit consectetur ipsum ullamco in nostrud id exercitation laboris dolor eu qui nisi in duis dolore cillum cupidatat nisi aliquip deserunt aute sint excepteur cillum magna veniam sit laboris enim reprehenderit sint minim anim cillum ea irure ad labore duis enim deserunt quis incididunt in officia ipsum mollit pariatur esse minim sint occaecat officia laborum voluptate eu quis nulla aliquip adipiscing in laboris occaecat ut dolor id dolor ut laborum labore minim dolore occaecat ad amet exercitation aute incididunt eiusmod labore lorem ullamco minim veniam in deserunt qui non esse sint veniam ad dolor amet aliquip non pariatur aliqua ea reprehenderit exercitation in consectetur ut dolore lorem fugiat ullamco ut ut qui magna ex dolor ullamco irure quis aute ut voluptate quis aliqua dolor lorem proident in laborum nisi adipiscing commodo elit deserunt reprehenderit reprehenderit est veniam consequat dolore cillum reprehenderit laborum dolor eu id velit dolor id quis nulla adipiscing exercitation est incididunt consectetur ullamco eu tempor laborum aliquip nulla excepteur eu lorem sit pariatur do do in ea enim cupidatat esse fugiat amet eu non est tempor incididunt laborum voluptate non fugiat 
                                    </div>
                                  </div>
                                </div>

Ex labore minim qui dolore labore elit consequat est ut enim excepteur ea tempor magna incididunt est anim in ex sint dolore excepteur commodo amet sint consectetur velit quis ad incididunt minim culpa dolore do cillum est nulla est est esse aute ad cupidatat id ut do tempor officia id magna quis in velit deserunt nisi proident ipsum ipsum aliqua duis non consequat lorem proident est duis labore laboris est occaecat occaecat tempor sint laborum consectetur labore incididunt sed consectetur sit fugiat sit nisi duis eiusmod sed ad lorem laboris dolore cupidatat ea excepteur sit amet excepteur est amet dolor aliqua enim cillum commodo exercitation ad ad reprehenderit dolor fugiat id elit sint aliquip id do veniam elit esse deserunt sint in ex exercitation sed tempor velit id dolore commodo dolor nulla quis ipsum est duis dolor ut amet laborum in nisi enim commodo laboris in laborum consequat ex cillum veniam laboris dolor anim id reprehenderit laboris incididunt voluptate fugiat enim officia ea laborum laborum occaecat reprehenderit dolore consequat sit commodo esse in dolore ad ut do qui in officia laboris nisi tempor dolor non aliqua exercitation reprehenderit consequat tempor culpa id eiusmod mollit exercitation labore proident do dolore lorem

Irure et ex in dolor exercitation consequat dolor qui est aute voluptate lorem est eiusmod dolor dolore nulla lorem esse ex adipiscing fugiat dolor in excepteur est sed ullamco culpa deserunt ut nisi velit in sint sed reprehenderit nisi ut ad aliqua lorem ea sunt pariatur aliquip aliquip et eu occaecat dolore occaecat velit ut fugiat ut qui dolore ut officia culpa nulla qui reprehenderit veniam cupidatat veniam in ad do occaecat dolore laborum aliqua fugiat dolor occaecat tempor ullamco ut commodo aliqua labore do sunt ea in commodo id cupidatat aliquip sunt dolor cupidatat ullamco consequat non ipsum sed in sunt occaecat minim in sit anim reprehenderit veniam officia dolore nulla dolor commodo sed eu amet dolor dolor deserunt exercitation adipiscing sed est culpa adipiscing proident ut adipiscing qui nostrud pariatur qui et cillum magna ut aliquip officia dolor labore qui pariatur et eu nostrud dolore laborum tempor voluptate ut in excepteur nisi aliquip ex laborum minim labore ullamco amet cillum consequat aute ea quis sunt ullamco fugiat eiusmod velit fugiat ut minim sunt ad sed enim nulla non sit qui in in eiusmod consectetur non in reprehenderit dolor aliqua cupidatat ut cillum mollit reprehenderit commodo mollit do dolor

Nulla esse ut pariatur irure occaecat cillum laboris ullamco mollit occaecat aliquip ipsum occaecat sed in exercitation duis aliquip commodo velit qui consequat ut quis esse exercitation ipsum consectetur tempor dolor in ut pariatur in lorem aliquip magna amet qui reprehenderit pariatur excepteur laboris in aliqua culpa sint in in quis nisi ipsum elit minim nulla irure mollit do dolor excepteur proident proident excepteur irure ad dolor eu cillum elit laboris pariatur commodo sed aute reprehenderit voluptate anim est ullamco nostrud id enim officia commodo excepteur commodo proident ut ut consectetur amet sit labore minim anim commodo do ullamco dolore ut eu occaecat in in velit dolor ad eu consequat id dolor magna occaecat id in eiusmod enim enim nisi elit aute dolore nisi nostrud ipsum adipiscing aliquip eiusmod in quis qui ipsum consectetur sed do qui sint in velit aliquip reprehenderit irure amet id qui voluptate amet dolor non eu mollit anim labore ut lorem cupidatat ex sunt cupidatat consectetur duis id nisi quis aliquip cupidatat consequat ut dolor consectetur consequat enim consectetur nisi officia qui nulla occaecat dolore minim ex in cupidatat aute est in nisi exercitation non laborum sint consequat esse amet in anim ullamco consectetur velit

API Reference

Properties

Name	Description	Type	Required	Default value
no-toggle	Disables toggle button	boolean		false

Events

Event	Description	Returns
toggle	Fires when toggle button clicked	{ detail: { extended: [boolean] } }

UI Kit

Verticalnav

Default

Copy Jade Copy HTML Show code Hide code

Variations

Item with multiple status Copy Jade Copy HTML Show code Hide code

With title Copy Jade Copy HTML Show code Hide code

With title and buttons Copy Jade Copy HTML Show code Hide code

Fullheight Copy Jade Copy HTML Show code Hide code .e-verticalnav-fullheight

Nopadding Copy Jade Copy HTML Show code Hide code .e-verticalnav__content-nopadding

Without toggle button Copy Jade Copy HTML Show code Hide code no-toggle

Condensed Copy Jade Copy HTML Show code Hide code .e-verticaltab-condensed

Angular example Copy Jade Copy HTML Show code Hide code