Bear Blog list navigation styles

A plain Markdown list is easy to overlook, just bullets and links, nothing more. Wrap it in a container and it becomes a proper piece of navigation.

This page collects small CSS tweaks and variations for turning a list of links into a grid, a tree, or an inline menu. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 2 hours, 37 minutes ago.

Grid

Grid list navigation

A responsive grid for link collections, resource lists, or anything you want arranged neatly.

Markup

<div class="grid">

- [One](#)
- [Two](#)
- [Three](#)

</div>

Styles

.grid ul {
    list-style: none;
    margin-block: 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
    .grid ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 45rem) {
    .grid ul {
        grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    }
}

.grid li {
    margin: 0;
}

.grid a {
    display: block;
    padding: 0.8em 0.9em;
    line-height: 1.35;
    font-weight: 500;
    background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
    border-radius: 6px;
    text-decoration: none;
}

@media (hover: hover) {
    .grid a:hover {
        border-color: color-mix(in srgb, var(--text-color), transparent 40%);
    }
}

Tree

Tree list navigation

Turns a list into a tree-style menu with a vertical line and branch markers, useful for nested navigation or a table of contents.

Markup

<div class="tree">

- [First item](#)
- [Second item](#)
- [Third item](#)

</div>

Styles

.tree ul {
    padding: 0;
    padding-inline-start: 1.5rem;
    list-style: none;
    border-inline-start: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

.tree li {
    position: relative;
    margin-block: 0.4em;
}

.tree li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.8em;
    inset-inline-start: -1.2rem;
    width: 0.5rem;
    height: 1px;
    background: color-mix(in srgb, var(--text-color), transparent 85%);
}

.tree a {
    font-weight: 500;
    text-decoration: none;
}

@media (hover: hover) {
    .tree a:hover {
        text-decoration: underline;
        text-decoration-thickness: 0.12em;
        text-underline-offset: 0.2em;
    }
}

Inline

Inline list navigation

A horizontal menu strip with centered links and a dot separator, works well for short lists like tags or archive years.

Markup

<div class="inline">

- [About](/about/)
- [Photos](/photos/)
- [Writing](/writing/)

</div>

Styles

.inline ul {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    padding-block: 0.75rem;
    padding-inline: 0;
    list-style: none;
    font-size: calc(var(--font-scale) * 0.85);
    font-weight: 500;
    color: color-mix(in srgb, var(--text-color), transparent 40%);
    background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
    border-block: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

.inline a {
    text-decoration: none;
}

@media (hover: hover) {
    .inline a:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
    }
}

.inline li:not(:last-child)::after {
    content: "·";
    margin-inline-start: 0.8rem;
    opacity: 0.7;
    pointer-events: none;
}

Want more? Check out the full Bear Blog library.