Nested list

A nested list is suitable for a table of contents / navigational list

This tailwind example is contributed by Noob, on 18-Sep-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

List

Author Noob

Tailwind v3.4 21.7k 14

Fork Fullscreen

<div class="p-12 dark:bg-gray-800">
    <h5 class="text-slate-900 font-semibold mb-4 text-sm leading-6 dark:text-slate-100">On this page</h5>
    <ul class="text-slate-700 text-sm leading-6">
        <li>
            <a href="#class-reference"
                class="block py-1 font-medium hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">Quick
                reference
            </a>
        </li>
        <li>
            <a href="#basic-usage" class="block py-1 font-medium font-medium text-sky-500 dark:text-sky-400">Basic
                usage
            </a>
        </li>
        <li class="ml-4">
            <a href="#adding-an-outer-shadow" class="group flex items-start py-1 text-sky-500 dark:text-sky-400">
                <svg width="3" height="24" viewBox="0 -9 3 24"
                    class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500">
                    <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    </path>
                </svg>Adding an outer shadow
            </a>
        </li>
        <li class="ml-4">
            <a href="#adding-an-inner-shadow"
                class="group flex items-start py-1 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
                <svg width="3" height="24" viewBox="0 -9 3 24"
                    class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500">
                    <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    </path>
                </svg>Adding an inner shadow
            </a>
        </li>
        <li class="ml-4">
            <a href="#removing-the-shadow"
                class="group flex items-start py-1 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
                <svg width="3" height="24" viewBox="0 -9 3 24"
                    class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500">
                    <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    </path>
                </svg>Removing the shadow
            </a>
        </li>
        <li>
            <a href="#applying-conditionally"
                class="block py-1 font-medium hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">Applying
                conditionally
            </a>
        </li>
        <li class="ml-4">
            <a href="#hover-focus-and-other-states"
                class="group flex items-start py-1 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
                <svg width="3" height="24" viewBox="0 -9 3 24"
                    class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500">
                    <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    </path>
                </svg>Hover, focus, and other states
            </a>
        </li>
        <li class="ml-4">
            <a href="#breakpoints-and-media-queries"
                class="group flex items-start py-1 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
                <svg width="3" height="24" viewBox="0 -9 3 24"
                    class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500">
                    <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    </path>
                </svg>Breakpoints and media queries
            </a>
        </li>
        <li>
            <a href="#using-custom-values"
                class="block py-1 font-medium hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">Using
                custom values
            </a>
        </li>
        <li class="ml-4">
            <a href="#customizing-your-theme"
                class="group flex items-start py-1 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
                <svg width="3" height="24" viewBox="0 -9 3 24"
                    class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500">
                    <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    </path>
                </svg>Customizing your theme
            </a>
        </li>
        <li class="ml-4">
            <a href="#arbitrary-values"
                class="group flex items-start py-1 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
                <svg width="3" height="24" viewBox="0 -9 3 24"
                    class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500">
                    <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                    </path>
                </svg>Arbitrary values
            </a>
        </li>
    </ul>
</div>