Link copied!

Examples

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