Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Vertical tab

Default

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

Variations

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

Item with badge
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

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

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

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

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

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

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

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

Angular example
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

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

API Reference e-verticalnav-menu

Properties

NameDescriptionTypeRequiredDefault value
idUse as a key for storing the menu is expanded or not, should be a uniquestring-
statusSet the status to entire vertical menu-| "disabled"-
no-toggleDisables toggle buttonbooleanfalse

Events

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

API Reference e-verticalnav-item

Properties

NameDescriptionTypeRequiredDefault value
valueLabel of the itemstring
iconName of the iconstring-
statusCan be multipleactive|disabled|faded-
badgeit will be display the value of attribute/propertystring-

Related components

AccordionTab