--- layout: default title: Ghost UI · Making publishing beautiful. --- <header class="page-header"> <a class="menu-button" href="#"><span class="sr-only">Menu</span></a> <h2>Home</h2> </header> <section class="page-content"> <h3>Nav List</h3> <h5><code>ul > li > a</code> structure</h5> <ul class="nav-list"> <li class="nav-list-item"> <a href="#"> <b>Revision History</b> <span>12 versions of this post by 3 people.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Advanced Settings</b> <span>Convert to a page, mark as featured.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Meta Data</b> <span>Extra content for SEO and social media.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Custom App</b> <span>Registered an advanced setting panel.</span> </a> </li> </ul> <hr> <h5>Full width</h5> <ul class="nav-list nav-list-block"> <li class="nav-list-item"> <a href="#"> <b>Revision History</b> <span>12 versions of this post by 3 people.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Advanced Settings</b> <span>Convert to a page, mark as featured.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Meta Data</b> <span>Extra content for SEO and social media.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Custom App</b> <span>Registered an advanced setting panel.</span> </a> </li> </ul> <hr> <h5><code>nav > li > a</code> structure</h5> <nav class="nav-list"> <li class="nav-list-item"> <a href="#"> <b>Revision History</b> <span>12 versions of this post by 3 people.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Advanced Settings</b> <span>Convert to a page, mark as featured.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Meta Data</b> <span>Extra content for SEO and social media.</span> </a> </li> <li class="nav-list-item"> <a href="#"> <b>Custom App</b> <span>Registered an advanced setting panel.</span> </a> </li> </nav> <hr> <h5><code>div > a</code> Structure</h5> <div class="nav-list"> <a href="#" class="nav-list-item"> <b>Revision History</b> <span>12 versions of this post by 3 people.</span> </a> <a href="#" class="nav-list-item"> <b>Advanced Settings</b> <span>Convert to a page, mark as featured.</span> </a> <a href="#" class="nav-list-item"> <b>Meta Data</b> <span>Extra content for SEO and social media.</span> </a> <a href="#" class="nav-list-item"> <b>Multi-line nav list item, checking internationalization</b> </a> <a href="#" class="nav-list-item"> <b>Custom App</b> <span>Registered an advanced setting panel.</span> </a> <a href="#" class="nav-list-item"> <b>Single Line</b> </a> <a href="#" class="nav-list-item"> <span>Just the description, that's going to split into multiple lines, because testing yo.</span> </a> </div> </section>