File manager

File manager - Edit - /home/opticamezl/www/newok/templates/yootheme/packages/styler/tests/nav.html

Back
<div class="uk-section uk-section-default"> <div class="uk-container"> <div class="uk-child-width-1-3@s uk-grid-large" uk-grid> <div> <h2>Default</h2> <ul class="uk-nav-default uk-nav-accordion" uk-nav="multiple: true"> <li class="uk-active"><a href="#">Active</a></li> <li class="uk-parent uk-open"> <a href="#">Parent <span uk-nav-parent-icon></span></a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a> <ul> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> </ul> </li> <li class="uk-parent uk-open"> <a href="#">Parent <span uk-nav-parent-icon></span></a> <ul class="uk-nav-sub"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Sub item</a></li> </ul> </li> <li class="uk-nav-header">Header</li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li> </ul> </div> <div> <h2>Primary</h2> <ul class="uk-nav-primary uk-nav-accordion" uk-nav="multiple: true"> <li class="uk-active"><a href="#">Active</a></li> <li class="uk-parent uk-open"> <a href="#">Parent <span uk-nav-parent-icon></span></a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a> <ul> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> </ul> </li> <li class="uk-parent uk-open"> <a href="#">Parent <span uk-nav-parent-icon></span></a> <ul class="uk-nav-sub"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Sub item</a></li> </ul> </li> <li class="uk-nav-header">Header</li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li> </ul> </div> <div> <h2>Secondary</h2> <ul class="uk-nav uk-nav-secondary"> <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet.</div></div></a></li> <li class="uk-parent"> <a href="#"><div>Parent<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet.</div></div></a> <ul class="uk-nav-sub"> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a> <ul> <li><a href="#">Sub item</a></li> <li><a href="#">Sub item</a></li> </ul> </li> </ul> </li> <li class="uk-parent"> <a href="#"><div>Parent<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet.</div></div></a> <ul class="uk-nav-sub"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Sub item</a></li> </ul> </li> <li class="uk-nav-header">Header</li> <li><a href="#"> <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: table; ratio: 1"></span> <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet.</div></div> </a></li> <li><a href="#"> <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: thumbnails; ratio: 1"></span> <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet.</div></div> </a></li> <li class="uk-nav-divider"></li> <li><a href="#"> <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: trash; ratio: 1"></span> <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet.</div></div> </a></li> </ul> </div> </div> <h2>With Subtitle</h2> <div class="uk-child-width-1-3@s uk-grid-large" uk-grid> <div> <ul class="uk-nav-default" uk-nav> <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div></div></a></li> </ul> </div> <div> <ul class="uk-nav-primary" uk-nav> <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li> </ul> </div> <div> <ul class="uk-nav-secondary" uk-nav> <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div></div></a></li> </ul> </div> </div> <h2>With Dividers</h2> <div class="uk-child-width-1-3@s uk-grid-large" uk-grid> <div> <ul class="uk-nav-default uk-nav-divider" uk-nav="multiple: true"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-nav-primary uk-nav-divider" uk-nav="multiple: true"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-nav-secondary uk-nav-divider" uk-nav> <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div></div></a></li> <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div></div></a></li> </ul> </div> </div> </div> </div>

| ver. 1.4 | Github | . | PHP 8.3.23 | Generation time: 0.02 | proxy | phpinfo | Settings