Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Vertical tab

Default

Copy Pug
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">
    Qui nulla aliquip incididunt qui quis velit exercitation pariatur anim nostrud pariatur ea consequat id ut cupidatat dolor in ullamco aliqua fugiat laboris consequat adipiscing ea est velit enim aliqua mollit pariatur duis reprehenderit magna sed commodo id cillum laboris enim dolore ut deserunt consectetur in dolore nostrud sint anim consequat magna consectetur enim qui sint duis eu lorem enim nulla incididunt in occaecat qui reprehenderit voluptate duis dolore nulla labore ex aliqua ullamco labore anim qui consequat commodo quis in dolore occaecat aliqua non mollit id commodo aliqua ut officia proident incididunt culpa voluptate eu ea dolor proident in ut dolore ex sed elit do nulla dolor ipsum veniam do deserunt in consequat ipsum eu laboris cillum aliqua veniam in officia nisi ipsum dolore lorem ut non deserunt quis laboris sed nulla adipiscing veniam proident id mollit culpa labore esse pariatur veniam et id pariatur non labore dolore aute qui cupidatat do dolor occaecat exercitation lorem aute exercitation veniam ad tempor non id labore commodo ipsum culpa nulla irure nostrud in sunt nostrud esse sed adipiscing magna veniam ut ut ad lorem culpa qui ea in laboris tempor fugiat ut duis veniam consequat amet sit ad voluptate labore non 
  </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">Reprehenderit occaecat dolor anim non exercitation cillum pariatur culpa dolore ullamco enim reprehenderit eu quis lorem ad eiusmod excepteur sunt eu dolore enim officia velit occaecat aliquip aliquip labore enim culpa excepteur veniam ullamco id consectetur minim in sit dolore commodo ut dolore laborum proident in ut qui dolore ut veniam ut irure mollit nisi commodo ut sit ut mollit veniam reprehenderit occaecat fugiat incididunt ut sunt ex proident exercitation et enim ad esse ex elit qui et tempor sed qui mollit ad officia veniam ut do ut ut in veniam ullamco est lorem ipsum velit in excepteur consequat nulla tempor mollit nulla veniam in ex minim eu velit cupidatat commodo ut pariatur proident ex cupidatat ea occaecat est ut veniam aute officia cupidatat cillum aute excepteur officia officia deserunt irure aliquip proident incididunt ex ipsum laboris in lorem tempor fugiat ut deserunt lorem culpa officia proident cupidatat dolor tempor mollit ut cillum eiusmod pariatur nostrud et est elit magna in enim dolore ut excepteur ut do officia ea sed occaecat nisi aliquip exercitation ad dolor in nulla aliquip ex veniam dolore voluptate sint veniam velit do commodo elit laborum nisi ut nisi ex esse esse amet velit ullamco laborum </div></div>
Minim deserunt cupidatat non velit exercitation fugiat amet consequat in incididunt lorem aute id reprehenderit sunt aliqua nulla laborum nulla sed elit sunt esse magna incididunt culpa aute ullamco magna amet aliquip mollit ullamco irure amet dolore anim occaecat dolor dolore non incididunt incididunt pariatur magna ad in in laboris aute labore occaecat in dolore elit dolor sunt adipiscing consectetur non nulla minim eiusmod proident aute et quis sed occaecat deserunt elit ut dolor consectetur sint in ipsum nulla excepteur magna magna fugiat in sed irure sint sit mollit sed enim magna quis enim ipsum irure occaecat ex sunt occaecat voluptate adipiscing esse dolore qui officia non officia amet ut lorem reprehenderit voluptate esse sint excepteur pariatur pariatur et ad consequat et aliqua in commodo voluptate do aute in ut ut culpa commodo dolore dolor dolore irure dolor ut ut anim nulla in ullamco lorem anim elit in veniam aliqua dolor duis elit aute incididunt laborum minim cupidatat adipiscing cillum consectetur cupidatat ut anim deserunt dolore reprehenderit qui laborum irure adipiscing ad culpa sed nostrud irure culpa veniam minim officia aute pariatur ea labore pariatur consequat exercitation qui dolor culpa duis ea adipiscing in est sint veniam do ea pariatur

Variations

Item with multiple status
Copy Pug
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">
    Consectetur pariatur esse tempor id aliqua minim labore veniam cupidatat minim ex eiusmod consequat qui amet ut enim est aliqua eu nostrud magna mollit mollit velit proident consequat culpa duis do in dolore adipiscing quis ut esse in esse id ut in quis commodo dolor incididunt amet ut eiusmod magna ipsum aliqua voluptate reprehenderit consectetur cupidatat tempor in in irure et cupidatat commodo cillum in do ullamco eiusmod esse irure culpa officia labore ut velit in occaecat officia do est ea sint sed et anim reprehenderit in irure culpa qui in occaecat dolore amet ut aute in esse ipsum lorem aliqua dolor nostrud velit aliqua sit dolore velit est eiusmod irure nostrud in anim in aliquip ea incididunt incididunt enim id nisi minim fugiat dolor reprehenderit ut do sunt dolore velit dolor officia lorem commodo sunt minim id dolor esse ut ut nisi veniam in qui deserunt nisi laboris commodo commodo ex mollit enim adipiscing irure magna amet sed culpa nisi fugiat sunt sit qui sit do esse cupidatat qui qui fugiat do aliqua occaecat in dolore ex sint fugiat consectetur velit est aliqua enim proident est officia esse incididunt ipsum non ipsum in commodo et enim sed est ut 
  </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">Consectetur in dolore ipsum eiusmod do tempor exercitation cupidatat esse in non ut esse dolore in mollit velit ullamco veniam nostrud sed ipsum cillum incididunt sint proident ex culpa deserunt deserunt elit officia tempor voluptate occaecat id incididunt exercitation ea laboris labore ea dolore aliquip veniam laborum lorem voluptate adipiscing sit pariatur esse dolore ipsum ex et nulla in voluptate nostrud est culpa tempor excepteur lorem esse ad esse dolore in cupidatat aliqua id in adipiscing occaecat elit velit commodo ullamco sed anim quis et reprehenderit eiusmod officia reprehenderit in id labore ut pariatur aliqua excepteur laboris magna officia exercitation cupidatat cupidatat excepteur aliquip quis dolore do labore in irure quis dolor laboris fugiat sunt sunt pariatur ipsum non et amet do culpa tempor nostrud nisi consectetur enim ipsum anim veniam lorem laborum non incididunt tempor ad pariatur pariatur elit dolore ex quis consectetur lorem exercitation esse in duis ex tempor cillum cillum fugiat quis nostrud esse ad duis voluptate anim aliquip mollit sit do enim in consequat in culpa deserunt sed id sed pariatur magna ut in sed dolor sunt labore ut sed ut excepteur exercitation amet labore dolore dolor do esse in incididunt duis ad adipiscing excepteur velit </div></div>
Proident culpa proident elit nulla sint ut ad aute et ad adipiscing nulla sit adipiscing do sunt ut nostrud aute exercitation est lorem consequat sit ad veniam nisi anim sunt anim aliqua velit id id ullamco exercitation aliquip ut elit mollit dolore velit velit proident in nulla enim consequat cupidatat amet veniam enim in cupidatat fugiat veniam in dolore consequat culpa fugiat excepteur ex incididunt ex adipiscing deserunt reprehenderit voluptate lorem qui sint ut proident pariatur proident sint adipiscing consectetur in non enim laborum consectetur commodo laboris ad ipsum cillum elit duis adipiscing amet voluptate consectetur sed excepteur consequat mollit incididunt voluptate ex in elit officia qui dolor in voluptate esse adipiscing reprehenderit eu reprehenderit consequat duis do consequat nisi occaecat cillum qui magna id laboris sed in enim non laborum et minim culpa enim quis velit cupidatat et fugiat ad elit ex ea ut occaecat in adipiscing exercitation ex id ipsum ut ut sed ullamco veniam laboris id aliqua sed amet deserunt qui id in enim duis eu magna nulla cillum occaecat velit quis velit ad quis dolore pariatur et dolore anim culpa sunt id consequat fugiat aliqua cillum mollit ullamco ea commodo irure excepteur id enim minim incididunt

With title
Copy Pug
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>
    Est et sed nulla veniam eu commodo eu ex occaecat ut anim amet elit sit eu consectetur elit eu officia ut eu id pariatur ullamco sunt est in anim tempor laboris qui veniam est proident cillum non nostrud dolore proident elit occaecat mollit dolore minim lorem qui sit anim in nulla enim sunt amet dolore in quis quis consectetur do sit mollit nulla laboris deserunt elit velit velit nostrud incididunt velit irure aute lorem ea id eu quis minim esse sed voluptate velit officia labore dolor in ut exercitation cupidatat duis dolor id excepteur dolore duis est et reprehenderit anim labore enim reprehenderit dolore nisi anim amet exercitation veniam proident consequat eiusmod consectetur eu ad amet dolor ullamco est in in sint laboris anim sit in elit officia eiusmod commodo irure et aute cillum enim commodo consectetur est duis elit qui in in irure ut anim tempor nulla officia pariatur laborum nulla amet mollit esse duis amet ut excepteur occaecat sit cillum occaecat nisi dolore do veniam enim ipsum pariatur cillum officia dolore voluptate in aute in ea laboris incididunt officia proident magna sint in dolore dolor dolor reprehenderit dolor irure occaecat officia ullamco ut pariatur occaecat in sit duis 
  </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>Culpa velit magna in laborum eiusmod fugiat ut cillum est in excepteur esse aliqua sit dolor magna sed veniam dolor laborum ut officia ut sed sint dolor consequat laboris incididunt labore irure minim dolor consectetur ut dolor fugiat nostrud lorem sit in proident sed magna aliquip consectetur dolor laboris sunt consequat eiusmod irure dolore et reprehenderit duis incididunt non exercitation ipsum adipiscing laboris esse ipsum in qui ipsum nostrud ut magna commodo anim dolore adipiscing adipiscing ut ea aliquip laborum dolore officia incididunt laboris reprehenderit ut do fugiat tempor do sint in ad quis ex sed in eu esse exercitation consequat tempor fugiat velit in voluptate aute non dolore aute ipsum sint in eu pariatur velit dolore aliquip voluptate sint sunt dolore adipiscing in id cillum qui do ut laborum cupidatat aliqua sint voluptate excepteur lorem ut exercitation aute pariatur eiusmod eu in id duis id ea labore do voluptate ut in sint lorem in excepteur non excepteur eiusmod aliquip pariatur aliqua dolor minim consequat ea dolor cupidatat proident laborum occaecat enim eiusmod aliquip velit qui ut do irure eiusmod veniam esse sed in occaecat qui eiusmod in enim cillum do elit occaecat consequat lorem proident dolore lorem amet exercitation </div></div>
Lorem ipsum
Pariatur dolore occaecat sit amet ad consequat nostrud sit sunt et ipsum ipsum minim culpa ut consequat mollit deserunt est anim minim veniam esse non nisi reprehenderit excepteur amet pariatur do non eu amet elit consequat elit fugiat tempor aliquip minim sed velit dolore adipiscing commodo commodo in velit ipsum duis lorem mollit ea tempor veniam mollit sunt quis sed in proident adipiscing laboris id exercitation exercitation irure anim nostrud cillum enim sed tempor ut sed aliqua dolor ad officia qui occaecat dolore irure deserunt non proident ut excepteur duis ut labore velit dolor sunt reprehenderit lorem tempor nulla est ut eiusmod nulla voluptate fugiat ex ea fugiat nostrud nisi culpa exercitation aute anim aliquip ipsum officia dolor in dolor velit ut dolor enim in proident dolor dolor ullamco tempor cupidatat eu commodo incididunt anim ut minim consequat mollit id cillum commodo pariatur esse sit amet non pariatur voluptate excepteur dolore reprehenderit non voluptate laborum dolore aute ad dolore elit dolore ullamco ut esse id eiusmod deserunt sit officia sit sed aliqua aliquip anim ipsum occaecat ex veniam aliquip ullamco elit duis excepteur qui ullamco laboris nisi irure reprehenderit consectetur occaecat ex sed quis dolor dolore velit proident laboris culpa

With title and buttons
Copy Pug
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 class="e-btn" type="button">
          Button1
        </button>
        <button class="e-btn" type="button">
          Button2
        </button>
      </div>
    </div>
    Adipiscing irure exercitation voluptate labore occaecat anim irure aliqua quis consequat sunt nostrud cillum culpa proident nostrud laboris id excepteur fugiat cupidatat cupidatat in irure commodo consequat ipsum irure occaecat irure ea voluptate pariatur incididunt ut velit pariatur consectetur incididunt minim commodo culpa ex aliqua dolore culpa est magna sed labore officia aliqua occaecat magna sunt occaecat aliqua sunt ad eu irure dolor dolore esse esse duis in anim ut aliquip eiusmod ut id eiusmod dolor do aute exercitation et est anim ut adipiscing occaecat duis culpa ad et tempor ea do quis tempor dolor tempor ad officia minim duis enim sint fugiat cillum ut in et sed dolor ipsum eiusmod nulla dolore ex commodo reprehenderit elit elit ad ut amet officia incididunt mollit aliquip qui et laboris aute ut occaecat aliqua laboris nostrud anim sunt mollit dolore nulla tempor velit commodo cupidatat ut dolore ut commodo irure minim et sit ex pariatur exercitation nulla in excepteur sunt cupidatat sunt consequat duis enim do aute minim dolor reprehenderit in dolor enim sit esse laborum sunt incididunt ad ex dolore enim duis aliqua magna minim aliqua pariatur dolor nisi laborum excepteur nisi elit occaecat velit elit ut sit in id qui 
  </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 class="e-btn" type="button">Button1</button><button class="e-btn" type="button">Button2</button></div></div>Lorem laborum pariatur dolore laborum consequat adipiscing qui sunt voluptate ex ut tempor aliqua deserunt mollit labore minim aute ea dolore ut commodo dolor esse minim dolor id dolore voluptate ipsum non deserunt irure sunt excepteur occaecat magna quis aliqua et nostrud cupidatat pariatur culpa pariatur ut ut in officia cupidatat veniam commodo reprehenderit irure dolor tempor sint dolor ipsum id sint consequat aliquip culpa culpa fugiat sunt ipsum quis nulla culpa tempor nostrud eu in occaecat sint cillum elit voluptate sint dolor dolore esse dolore sint laboris qui laboris elit dolore amet veniam enim nisi ex consequat enim excepteur qui consequat anim amet ipsum velit quis deserunt duis duis dolore elit reprehenderit irure in voluptate est qui ullamco quis nulla commodo in sed velit elit incididunt enim deserunt voluptate consectetur velit eu elit enim aliquip labore pariatur deserunt do do tempor mollit occaecat ut in incididunt sit sunt duis in sed duis enim proident consectetur qui irure nostrud pariatur ea eu do magna fugiat aliquip officia eiusmod laborum duis cillum velit dolore id dolor fugiat tempor voluptate cupidatat in nisi in in labore voluptate est esse fugiat ad ut et consectetur sint in ut veniam in esse culpa fugiat </div></div>
Lorem ipsum
Labore pariatur ipsum in excepteur labore sunt consectetur dolor ullamco lorem dolore eu elit laborum et quis ullamco quis commodo enim occaecat aliquip excepteur dolore eu non reprehenderit cillum cillum velit ut veniam ut elit cillum qui lorem anim mollit ut aliqua laborum elit fugiat minim aliquip in veniam mollit esse cupidatat minim do occaecat ea cupidatat ex dolor amet aliquip eu officia in voluptate reprehenderit incididunt esse duis reprehenderit enim ex et cupidatat aute tempor ipsum voluptate dolore et cillum sed nulla esse incididunt ullamco et in fugiat excepteur dolore sunt magna sed velit dolore dolor pariatur dolor aliqua labore dolor voluptate fugiat excepteur ullamco non officia pariatur esse do qui enim nisi do lorem cillum cillum velit laborum dolore esse dolor et enim nulla labore fugiat enim sit consectetur eiusmod nisi aute in enim consequat qui elit aliqua fugiat in lorem id quis cillum deserunt ut nisi veniam quis fugiat labore magna dolore excepteur laborum lorem non dolore ex occaecat fugiat adipiscing in lorem in voluptate commodo fugiat est ex et sunt quis ut reprehenderit exercitation est sunt aliqua aute excepteur tempor velit sit esse irure aliqua id in in adipiscing mollit dolore in minim in nulla incididunt

Fullheight
Copy Pug
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>
    Eiusmod duis labore labore ut aute velit elit tempor ea aliquip dolore nulla et ipsum aute ut dolore aliqua ut in mollit do lorem velit nostrud proident magna sit culpa voluptate cillum veniam do excepteur dolore adipiscing eu eu cupidatat ea aute reprehenderit fugiat aliqua consequat sunt do exercitation aliquip est duis ut ullamco in ex incididunt consectetur ut magna dolor incididunt aute dolore excepteur esse ut nostrud esse consequat eiusmod ut cupidatat qui eiusmod duis elit nisi reprehenderit minim cillum consequat consectetur aute pariatur sint deserunt nulla eu magna elit incididunt ea duis laborum tempor nulla in ut reprehenderit nulla amet cupidatat minim exercitation non nulla culpa amet non minim voluptate ea et non lorem exercitation duis in id et duis pariatur sunt consequat consectetur minim minim occaecat minim aliquip sit sunt fugiat irure anim minim elit fugiat non elit ex dolore duis sunt eiusmod ad ut ea et esse irure culpa et eiusmod dolore ut proident ut eu et pariatur esse laboris fugiat amet deserunt reprehenderit mollit magna consequat exercitation ex anim veniam in nulla non in nostrud veniam dolor sed pariatur incididunt incididunt dolore minim veniam irure commodo et sunt consectetur cillum elit tempor amet in cillum 
  </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>Ad occaecat ad et in incididunt aliqua do nostrud deserunt laborum culpa id ut irure lorem laboris laborum occaecat id ipsum laborum minim ullamco amet ut sit in aute labore deserunt consectetur elit tempor ad sit reprehenderit excepteur tempor lorem esse et ea aliqua eu tempor mollit reprehenderit eu officia eu nulla magna sunt laboris ad in excepteur aute et sed dolore cupidatat deserunt id ea culpa officia lorem duis voluptate nulla exercitation excepteur proident ad dolore ex ullamco in esse minim in magna excepteur ut ut commodo in ut ut dolor ex nostrud non ut anim anim culpa ex incididunt eiusmod aute dolor magna elit amet veniam fugiat irure nostrud labore ex reprehenderit sed lorem dolore ea elit lorem sit labore est velit dolore ad nulla excepteur ipsum non eu ad ut consequat in sint commodo sint anim officia ad elit fugiat consectetur non laboris fugiat non amet in dolor minim enim ullamco dolor deserunt minim lorem sunt est laboris reprehenderit aliqua adipiscing laboris exercitation elit ea fugiat sunt ullamco ipsum dolore in lorem in proident adipiscing non velit culpa dolor proident dolor id amet consequat quis et deserunt dolor eu occaecat sed non occaecat lorem ea officia in </div></div>
Lorem ipsum
Laborum aliquip ut dolore nisi ullamco mollit sint magna elit id aute dolore do adipiscing lorem ut sit ipsum ipsum velit ut tempor lorem culpa quis dolore amet in adipiscing ad laborum sint deserunt in ullamco velit dolor ad nostrud lorem laborum voluptate nulla proident quis dolor qui exercitation elit aute aliqua est ut ad officia quis ut ex anim anim pariatur veniam dolore nulla adipiscing qui dolor consequat lorem sed pariatur est lorem tempor pariatur ea incididunt dolor nostrud ut velit aute sunt mollit anim eu deserunt fugiat in occaecat aute sunt culpa laborum in sed do dolor officia quis ullamco in dolore et aliqua sed incididunt reprehenderit in ut aute commodo ut ipsum non amet fugiat est consectetur voluptate in labore aliqua cillum aute eu tempor consequat officia in dolore amet do nulla minim ipsum incididunt in aliquip nulla nisi amet enim in aliqua ea ea aute fugiat commodo incididunt ut culpa aliquip adipiscing est dolore ad magna sunt sunt pariatur officia in ea velit sunt id nostrud magna voluptate ut ut sunt qui ad tempor deserunt esse esse occaecat et deserunt dolore incididunt non minim culpa nulla proident occaecat anim cillum tempor et quis sed voluptate laborum

Nopadding
Copy Pug
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">
    Irure aliqua tempor ad elit est magna deserunt quis nulla id occaecat excepteur ut nulla ex nisi sed amet veniam do elit ullamco aliquip minim esse veniam deserunt nostrud incididunt minim excepteur anim commodo sed proident sed in amet quis in consectetur occaecat esse excepteur ea amet mollit nostrud ipsum magna dolor quis consequat ut occaecat duis eu incididunt in ullamco sint non et nulla duis sit adipiscing pariatur deserunt eu esse eiusmod ea qui sed fugiat aliquip ad elit occaecat fugiat incididunt est labore ad do deserunt duis magna ullamco sed in qui reprehenderit dolore dolore nostrud sint velit aute adipiscing in est incididunt veniam in ut non dolor adipiscing occaecat dolor eu reprehenderit ea ut adipiscing magna lorem ea lorem voluptate magna dolor pariatur est eiusmod ullamco duis consectetur in dolore deserunt elit nisi in proident deserunt proident ea occaecat in sit do elit sed exercitation commodo lorem nostrud non elit ullamco sunt deserunt sint non voluptate ipsum id amet ipsum fugiat in fugiat voluptate et ut magna nostrud ut dolore do sed dolor exercitation amet adipiscing do incididunt in dolore laboris et nisi id do dolore dolore quis elit dolore aute mollit excepteur irure sunt ut commodo 
  </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">Nisi minim in cillum dolor cillum labore esse qui reprehenderit anim nisi mollit ut labore lorem quis fugiat cupidatat esse labore excepteur ut in proident officia fugiat duis duis nisi sed labore dolore aliqua labore labore tempor sit culpa tempor in esse mollit consectetur quis in est consectetur elit incididunt id sint consequat dolor irure in tempor nulla quis et est nulla pariatur in nulla pariatur tempor commodo id amet amet aliquip minim sunt velit eu nisi fugiat occaecat aliqua reprehenderit elit in sed labore ad ipsum id proident ut magna dolor non anim ut esse sit officia magna eiusmod dolor consequat ullamco proident dolore minim eu excepteur proident ea cillum labore voluptate dolore amet consectetur aliqua non esse officia dolor sunt tempor est est qui consequat irure qui quis ipsum sit dolor aliquip aliqua est tempor enim amet dolor excepteur ut nisi id in veniam in amet reprehenderit ea amet consequat nulla lorem officia dolor ut dolor eu consequat dolor est reprehenderit ad tempor fugiat lorem exercitation lorem laborum do culpa irure enim nisi enim enim elit labore voluptate consectetur dolor ut deserunt ex consectetur in ex incididunt dolor esse consequat culpa veniam elit aliqua deserunt nisi velit pariatur </div></div>
Consequat pariatur enim ullamco tempor consequat et cillum amet nulla irure ullamco qui minim voluptate velit aliqua aliqua eiusmod sed duis do amet nulla quis tempor dolor dolor magna tempor consequat minim deserunt quis id non fugiat tempor officia ipsum ut adipiscing ex labore consectetur enim qui id eu ex proident magna velit anim tempor irure do ut sint elit ipsum pariatur ut aliqua in labore proident voluptate quis et deserunt dolor aliquip deserunt id anim anim pariatur velit ut cupidatat reprehenderit velit elit voluptate aliquip sunt magna nisi reprehenderit eu nostrud ex id anim anim sit in ut dolore dolore esse voluptate eiusmod mollit proident eiusmod pariatur anim dolore mollit minim sunt mollit tempor ea dolor sint ad elit ut adipiscing adipiscing pariatur sunt minim minim id consequat adipiscing laboris ullamco proident sed cillum in magna pariatur nisi minim ea sit aliqua enim voluptate pariatur reprehenderit dolore ullamco commodo exercitation aliqua tempor et fugiat in elit voluptate eu cillum esse irure aute ea lorem in ut minim nisi aliqua consequat fugiat elit tempor in proident culpa ad deserunt laboris ea mollit amet laboris culpa non deserunt deserunt cupidatat laboris irure ullamco dolore fugiat deserunt occaecat dolore exercitation nostrud in

Without toggle button
Copy Pug
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>
    Eu aliquip ea eu in culpa proident voluptate nisi cupidatat dolore id et non culpa ut laborum culpa sed adipiscing sit aliquip dolor dolore amet lorem ut lorem in consectetur nostrud tempor duis dolor pariatur est minim esse incididunt cupidatat dolor dolor amet sunt non dolor ut cupidatat in ut commodo laborum id sint cupidatat esse adipiscing cupidatat adipiscing et culpa qui nostrud tempor sit deserunt sunt quis est commodo do anim pariatur laboris incididunt eiusmod ut ut incididunt dolor eiusmod enim officia et dolor esse commodo qui commodo dolor aute mollit consequat amet mollit cillum fugiat commodo veniam eiusmod deserunt ex duis eu tempor quis in excepteur aliquip anim nostrud laboris enim cupidatat irure reprehenderit laborum ut id officia cupidatat ut ut dolore ut excepteur et sit aliqua proident irure sed elit commodo adipiscing culpa anim nulla magna cupidatat dolor amet pariatur id nulla et in dolor consequat incididunt laboris aute ut incididunt duis dolore dolor aliquip cillum amet in aliquip ad irure in non quis cillum fugiat veniam aliquip elit qui ea quis commodo voluptate labore esse ut labore anim duis pariatur amet ut irure ullamco in lorem tempor lorem sunt fugiat dolor proident deserunt minim eu esse 
  </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>Tempor velit nostrud officia pariatur sit commodo laboris laborum commodo commodo qui ad ea et nisi do nisi ut dolor ut enim officia nostrud excepteur dolore elit magna id excepteur minim nulla ut sit aliqua excepteur pariatur dolore id est culpa dolore sunt fugiat non ut do ex non proident nisi consequat fugiat quis in dolor proident nulla dolore reprehenderit quis elit adipiscing id dolor eu in in occaecat eiusmod dolore laboris esse magna fugiat amet voluptate dolor fugiat magna exercitation adipiscing ipsum occaecat magna sit esse deserunt sit dolor excepteur ullamco ut nostrud aliqua veniam exercitation aute proident aliquip non officia aliquip incididunt sunt adipiscing laboris adipiscing nulla minim aute in ut aute ut ut qui elit pariatur officia nostrud sint quis dolore ut esse laborum ad do nulla ipsum eiusmod veniam est adipiscing aute mollit aliquip laborum ullamco sint sit esse aliqua veniam cillum commodo velit ea dolor anim commodo consequat lorem cupidatat sint commodo ea consequat mollit deserunt exercitation exercitation aliquip sunt amet magna non velit culpa nulla enim sint et nostrud labore dolore dolore veniam ea cillum enim occaecat ad deserunt anim in nostrud qui qui ea irure est consectetur aute dolor consequat in eu consectetur </div></div>
Lorem ipsum
Mollit sed sunt nisi exercitation ea magna non veniam consectetur proident qui in aute dolore elit exercitation labore nisi ut lorem do laborum in dolore incididunt ex do culpa ut lorem et minim esse esse duis in in ut magna laborum esse in ut elit aliqua id ea lorem ipsum dolore est eu sit sit excepteur non laboris minim irure pariatur ex in dolor duis dolore id laboris nostrud anim labore cupidatat in eiusmod irure esse sit aliquip qui ut sunt consequat ut nulla nulla ipsum deserunt non sed veniam cillum quis incididunt officia minim sit aute commodo sed fugiat enim in reprehenderit in aliqua cillum nulla pariatur incididunt dolore est incididunt ut dolor occaecat irure consectetur nulla qui aute in qui laboris ad et sint cillum nisi enim id proident dolore et officia commodo occaecat aliquip eiusmod mollit duis cupidatat irure nostrud proident aliquip est amet ex dolore laboris exercitation aliquip aliqua ut magna dolore tempor voluptate id lorem officia cupidatat quis proident est nostrud incididunt fugiat officia non in sed nulla lorem ex incididunt qui consequat aute enim consequat nulla occaecat minim duis sunt sint in consectetur laborum in dolore exercitation in non consectetur fugiat sint duis exercitation

Condensed
Copy Pug
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">
    Mollit veniam reprehenderit dolore ea duis in irure sed in non fugiat fugiat ipsum tempor anim reprehenderit in enim in do mollit eu lorem est quis laboris cillum duis eiusmod dolor enim ullamco nisi sit adipiscing laborum esse exercitation ad laborum in dolor ut nostrud magna enim proident sint excepteur et excepteur occaecat amet ut exercitation qui adipiscing sint eu aute minim esse proident officia esse ad dolor eiusmod esse eiusmod sed quis proident pariatur deserunt eiusmod in minim amet in do amet fugiat amet cupidatat reprehenderit ea lorem exercitation minim id sunt ut eiusmod elit tempor dolore eiusmod culpa exercitation labore esse dolore ut eiusmod eiusmod sit eu pariatur irure cupidatat reprehenderit labore officia proident duis eu officia fugiat cupidatat aliqua consequat esse dolore exercitation irure adipiscing reprehenderit ex duis cillum laboris ex incididunt officia anim velit deserunt aliquip deserunt pariatur ipsum ipsum commodo ea aute sit lorem tempor nisi dolore ea ad magna fugiat ut veniam elit incididunt veniam id ipsum nostrud dolor velit ut ullamco labore ut adipiscing officia cillum laboris ad eiusmod amet laboris commodo minim cupidatat in excepteur esse do aliquip lorem sed tempor in eu excepteur velit lorem fugiat irure sed sed dolor proident 
  </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">Ut do eiusmod fugiat cillum irure fugiat aliqua ut in occaecat quis aliqua excepteur aliquip fugiat eiusmod nulla proident adipiscing nulla sit labore laborum sunt in dolore consequat est lorem et ullamco ea et in excepteur in officia fugiat dolore consequat nisi ullamco sint commodo sit officia lorem duis officia enim sunt velit in lorem sed enim anim culpa lorem adipiscing dolore est lorem nostrud sint et dolore cillum laborum nostrud pariatur irure amet culpa voluptate tempor labore cillum cillum ut dolor officia cupidatat exercitation mollit consectetur deserunt et voluptate commodo labore in in adipiscing velit reprehenderit dolor id in magna dolore esse laboris culpa do excepteur deserunt id proident labore anim reprehenderit est est reprehenderit voluptate ex qui est mollit tempor nisi eu mollit tempor minim exercitation incididunt ipsum laboris voluptate aute proident laboris cupidatat in labore irure et mollit ex dolor elit proident mollit pariatur ullamco nulla commodo cupidatat voluptate adipiscing laborum eu in cupidatat ad lorem minim laborum sed magna adipiscing commodo duis deserunt deserunt sunt sint nisi ex aliquip id in excepteur incididunt esse officia sunt proident ut tempor id qui elit in ut aliquip reprehenderit aliquip do cillum adipiscing sint consectetur est dolore irure laboris </div></div>
Sed nisi dolor nostrud incididunt ex enim nisi irure laboris dolore incididunt in do consequat voluptate sit elit elit deserunt proident elit pariatur aliqua tempor ad reprehenderit labore et enim laborum aliqua nisi ullamco veniam magna est enim excepteur sunt amet dolor sunt quis ea lorem est est enim amet sunt ipsum reprehenderit in eiusmod cillum amet et sed anim nisi aute exercitation veniam exercitation ex officia laborum lorem ut exercitation ad amet ea lorem in dolore ex adipiscing duis quis reprehenderit deserunt ex in sed consequat sunt quis sed fugiat voluptate consectetur irure veniam aliqua sed qui labore laborum veniam in ut proident nisi dolore duis cillum magna magna ut aute in proident lorem commodo quis veniam magna culpa officia excepteur quis nulla dolor lorem in ex laborum consectetur voluptate do id dolore quis fugiat cupidatat nisi ipsum consectetur do quis voluptate consectetur ullamco labore laboris adipiscing ad consectetur sit nostrud consectetur aute nulla velit ex nulla dolor officia incididunt tempor dolore ut duis aliquip sit laborum commodo ut ex do est minim mollit ex lorem enim anim excepteur ipsum veniam pariatur velit sunt ipsum cupidatat anim dolore laboris voluptate amet ullamco dolore ut anim eu reprehenderit tempor dolore

Angular example
Copy Pug
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 class="e-verticalnav__content" ng-if="!page || page == 'test1'">
      <div class="e-verticalnav__header">
        <div class="e-verticalnav__title">
          Tab 01
        </div>
      </div>
      Elit dolore culpa laboris in in aliquip sit nostrud velit do exercitation deserunt dolore ad in reprehenderit officia dolore consequat ut cillum nisi mollit nisi est magna exercitation sunt sed duis nisi esse fugiat qui anim culpa ut proident sunt minim id proident voluptate commodo esse enim dolore labore nisi veniam exercitation aliquip in nisi duis ad excepteur in dolore enim pariatur anim aute sunt nisi ex tempor irure deserunt irure dolore aliqua dolore ullamco ut aute consectetur occaecat velit minim id anim in culpa nostrud cillum nostrud cillum ex dolor elit deserunt fugiat ex velit do labore eu amet in deserunt excepteur ut excepteur aliqua qui consequat velit esse nulla dolore irure dolore ut cupidatat ex cupidatat lorem lorem in ut voluptate sed in consequat dolore dolore dolor ut fugiat lorem sed tempor ipsum reprehenderit non ex culpa officia nulla in ut ipsum magna nostrud ullamco dolor consectetur ut ullamco dolor elit duis ipsum cupidatat est dolor nulla fugiat ipsum ad ut do culpa ex in adipiscing in quis nostrud dolore in culpa in est excepteur aute ut laborum cupidatat exercitation velit lorem velit qui ea aute non ea consectetur nulla elit deserunt sed exercitation ullamco enim culpa lorem 
    </div>
    <div class="e-verticalnav__content" ng-if="page == 'test2'">
      <div class="e-verticalnav__header">
        <div class="e-verticalnav__title">
          Tab 02
        </div>
      </div>
      Culpa et aliquip elit velit fugiat sint in dolor enim proident laboris consectetur elit labore consequat aliqua exercitation officia aliqua dolore sit elit esse sed pariatur sit ut anim qui ex sit labore incididunt consectetur pariatur nostrud velit laborum aliquip eiusmod ad id ut sint sit dolor ex officia anim nisi id nisi cupidatat anim ut labore aliquip ut do aliqua enim ut reprehenderit fugiat exercitation dolore labore aute duis aliquip dolor ullamco dolore ex dolore aliquip eu nisi sit et adipiscing non occaecat excepteur aliquip voluptate exercitation aliquip amet veniam magna officia laboris elit velit deserunt dolore irure labore amet pariatur eu eu qui reprehenderit labore nulla velit et non esse aliqua sed dolore esse et in tempor dolor anim ipsum aliqua commodo est do adipiscing ullamco velit irure consectetur consectetur ex exercitation mollit occaecat enim quis ex excepteur magna reprehenderit qui in tempor nisi incididunt veniam nostrud cupidatat dolore tempor ex mollit officia pariatur sint esse deserunt elit exercitation veniam culpa ipsum dolore deserunt officia non exercitation tempor dolor consectetur in dolore ea qui ut ea ad dolor id officia dolor culpa in officia occaecat sunt irure commodo et eiusmod magna proident ea lorem irure nulla qui dolor 
    </div>
    <div class="e-verticalnav__content" ng-if="page == 'test3'">
      <div class="e-verticalnav__header">
        <div class="e-verticalnav__title">
          Tab 03
        </div>
      </div>
      Dolor ipsum id fugiat elit tempor do exercitation nulla et quis in velit ex elit ullamco exercitation elit cillum magna eu id veniam ut amet cillum anim do adipiscing consequat sed nisi dolor laboris occaecat sint dolor ut culpa nulla enim commodo sint consectetur eiusmod ut veniam laboris dolor in aliqua minim ad voluptate est cupidatat elit in magna enim voluptate sint id ut in sit dolore reprehenderit aute cupidatat id sunt esse dolore aute sunt velit nostrud nostrud ex cupidatat culpa et sed laboris do dolor in exercitation ipsum commodo irure excepteur et ea occaecat ut dolore lorem aliquip magna dolor est incididunt ut ea in duis dolor in consectetur commodo fugiat tempor ut in labore sit esse ipsum esse eiusmod in sit fugiat dolore aliquip ut ex id consequat aliqua voluptate nostrud in esse mollit esse consequat consequat in dolore esse voluptate minim laborum sunt qui ad irure pariatur tempor ut exercitation nisi laborum id ad commodo aliqua mollit dolor nisi dolore enim lorem incididunt ipsum velit magna deserunt lorem excepteur et qui ut ad in qui veniam ut ut culpa elit et ea ex adipiscing adipiscing in non in est et non aliqua cillum amet aliquip nulla 
    </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 class="e-verticalnav__content" ng-if="!page || page == 'test1'"><div class="e-verticalnav__header"><div class="e-verticalnav__title">Tab 01</div></div>Ex veniam fugiat sit labore commodo irure nulla excepteur magna mollit anim deserunt in eiusmod ut ullamco ad anim dolore lorem id commodo culpa dolore voluptate reprehenderit velit ea officia dolor aliquip deserunt elit tempor do cupidatat qui aute duis ut in voluptate eiusmod qui elit reprehenderit nisi excepteur exercitation pariatur velit aliquip ex deserunt exercitation culpa in mollit cupidatat pariatur tempor incididunt mollit magna cillum anim aute cupidatat enim lorem aliqua laboris enim dolore in ea nostrud nulla ut culpa amet ut nulla ullamco velit cupidatat ullamco enim deserunt esse est elit ea eiusmod pariatur nulla sed dolore ipsum enim consectetur amet cillum enim pariatur et dolore ex in nisi eiusmod ut eiusmod sunt eiusmod ipsum in minim incididunt mollit est veniam non dolor officia et ut esse nostrud est officia et nostrud qui laboris ut ex magna ex labore ea non reprehenderit est ipsum laboris ad ipsum irure in laboris sint quis et aute dolor do lorem commodo pariatur fugiat pariatur dolor do eiusmod eiusmod id cupidatat ipsum culpa laborum labore irure adipiscing nisi nostrud ullamco et aliqua fugiat ut occaecat aliquip in veniam dolor cillum in aliqua adipiscing aliquip cupidatat pariatur dolor consectetur anim elit in pariatur </div><div class="e-verticalnav__content" ng-if="page == 'test2'"><div class="e-verticalnav__header"><div class="e-verticalnav__title">Tab 02</div></div>Ullamco velit dolor deserunt minim nisi ut laborum id esse do officia sed ad sunt anim laboris ex eu ea voluptate eiusmod ut dolore proident est anim nostrud exercitation in est dolor cupidatat sunt veniam irure deserunt non dolor deserunt laborum sed ex veniam cillum magna dolore ea mollit adipiscing eu pariatur aliqua nostrud labore laboris qui ea non nulla qui ex consectetur ad ut elit occaecat sint non esse aute dolor minim voluptate quis commodo amet ea ut in nisi lorem in culpa aliqua sint ad ut minim in quis laboris dolor consequat exercitation deserunt aliqua ad lorem cillum aliqua quis adipiscing eu eiusmod dolor excepteur et id esse ad ut ea aute in ipsum id aliquip anim minim consequat in velit enim ullamco mollit dolore enim id exercitation ipsum irure mollit qui ea est enim sunt aliqua dolor in irure irure ut duis ut sunt anim occaecat occaecat excepteur dolore id sunt duis est esse ea velit mollit cillum ad ipsum ad sunt in velit consequat do consectetur cillum fugiat in duis lorem voluptate dolor non velit proident dolore in ex in et tempor id cillum proident exercitation adipiscing sunt lorem ut ipsum eu aute non est dolore </div><div class="e-verticalnav__content" ng-if="page == 'test3'"><div class="e-verticalnav__header"><div class="e-verticalnav__title">Tab 03</div></div>Proident ullamco proident adipiscing sit commodo sint commodo velit tempor reprehenderit labore dolore et amet quis cillum incididunt ut nostrud voluptate est officia amet mollit aliquip ipsum in veniam nulla magna non minim magna magna eiusmod do adipiscing irure fugiat in ut tempor aliquip culpa sint occaecat consectetur ut in adipiscing ut sit voluptate dolor tempor elit quis minim dolore culpa mollit ut fugiat do cillum mollit culpa veniam mollit excepteur eu proident sit sint excepteur cupidatat nostrud nostrud labore et in culpa anim aute eiusmod deserunt enim duis do eu excepteur non cupidatat incididunt elit incididunt culpa sed velit velit est nostrud qui nulla non sed nostrud proident velit ea tempor consequat magna duis officia ipsum deserunt in ex ad dolor nisi minim dolor do eu ut aute et dolore ex adipiscing dolore est commodo elit enim ex sint nulla eu laborum sit do ea do in aute consectetur voluptate in dolor eu ea aliquip minim deserunt nisi anim do ex consequat aliquip ut pariatur elit id sint enim dolore ullamco aliqua pariatur eu fugiat reprehenderit nostrud irure duis voluptate fugiat elit aute qui commodo enim dolore officia officia aliqua nostrud dolore incididunt magna fugiat labore reprehenderit sit est </div></div></div>
Tab 01
Consectetur exercitation magna sint dolor nulla in anim dolor velit enim ullamco amet sunt magna minim ut fugiat sunt consequat aute veniam velit excepteur eu nostrud id esse ullamco nisi ullamco ea in voluptate commodo velit ullamco sint tempor lorem in ipsum excepteur commodo qui incididunt ut enim ea tempor reprehenderit dolor incididunt quis velit cupidatat tempor non aute enim incididunt aliquip ea labore velit in pariatur aliqua nostrud excepteur qui ex dolore esse nisi ullamco cillum aute ad ea nulla irure sunt reprehenderit aute eiusmod commodo dolore sint et ea sint cupidatat minim aliquip adipiscing elit aliqua dolore cillum pariatur mollit mollit nulla sed in aliqua excepteur in dolore consectetur ut laborum consequat ullamco quis in mollit proident in cupidatat nisi ullamco pariatur magna sed qui minim laboris esse mollit aute dolor et nulla voluptate do fugiat mollit sit nostrud culpa exercitation laboris elit ea nostrud nisi veniam adipiscing nostrud excepteur officia lorem minim cupidatat dolore velit officia ullamco qui veniam occaecat elit ipsum ipsum ut magna cillum irure sed velit in duis in amet aliquip aute ex laborum pariatur pariatur eiusmod magna mollit cillum cupidatat laborum velit aliqua officia deserunt ipsum ullamco ullamco consequat in veniam veniam ipsum
Tab 02
Magna cillum consectetur id amet in officia ea lorem nostrud sint fugiat sunt anim laboris in fugiat sit ullamco exercitation sed eiusmod consequat dolor duis dolore aliquip qui ad lorem labore sunt sed velit incididunt voluptate ad eiusmod laborum ex pariatur officia reprehenderit enim nostrud incididunt qui velit occaecat proident magna proident pariatur officia in do quis mollit in amet laborum ut elit in deserunt ex ipsum aute do eu reprehenderit est ut est dolore tempor commodo cupidatat fugiat et fugiat tempor aliquip duis dolore aliquip fugiat exercitation duis ut ullamco anim dolor proident reprehenderit dolore esse adipiscing eiusmod nostrud excepteur id amet proident reprehenderit quis dolore pariatur irure laboris tempor voluptate quis et amet cillum officia cillum elit dolore laborum voluptate deserunt in amet magna occaecat et ex ipsum dolore duis eiusmod non id elit cillum in anim consectetur nulla consectetur proident ullamco do eu quis in ea aliquip do deserunt sit esse amet veniam esse aute eiusmod irure sed do sunt laborum dolor qui incididunt consequat in ullamco commodo magna nostrud consectetur laborum voluptate nulla duis quis veniam enim tempor dolor sit id proident fugiat voluptate sed occaecat tempor proident aute commodo qui aute occaecat proident sint sed
Tab 03
Ex est magna irure laborum dolore lorem consectetur magna ut officia cupidatat qui velit mollit ipsum sed sit in ullamco in laboris commodo duis eiusmod excepteur officia consequat sint sit deserunt cupidatat sint ex exercitation dolore adipiscing ea id ut occaecat eiusmod in ipsum lorem magna pariatur consectetur ut nulla aliqua qui dolore irure ea velit nisi sed et elit dolore ut cillum dolore do dolore occaecat ea commodo ex laborum nulla sint aliqua est dolor mollit nisi pariatur deserunt labore ex commodo laboris incididunt deserunt consequat et veniam anim et sed nulla dolor ut laboris magna dolor ut ut aute nisi qui ad nostrud exercitation ea aliqua enim esse occaecat esse adipiscing aliqua culpa voluptate cupidatat ut elit fugiat nostrud dolor lorem nulla nostrud sint non excepteur dolor eiusmod culpa consequat velit duis in commodo consectetur esse occaecat reprehenderit nostrud sed non culpa non ipsum et laborum consequat dolor ex veniam labore elit qui ad anim nulla nisi laboris ad labore duis dolore deserunt quis voluptate eiusmod reprehenderit ea dolor consectetur ut anim amet ipsum ut qui cupidatat dolore ut in dolor ut et non quis sit dolore sed est tempor ipsum consequat aliqua nulla ad magna non exercitation

API Reference

Properties

NameDescriptionTypeRequiredDefault value
no-toggleDisables toggle buttonbooleanfalse

Events

EventDescriptionReturns
toggleFires when toggle button clicked{ detail: { extended: [boolean] } }