---
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>