Robert Birming

Tree-style menu

An add-on that turns a plain list into a tree-style menu with a vertical line and branch markers. Useful for navigation pages, table of contents, or any structured list of links.1

Preview

How to use

Wrap your list in a container using the menu class.

Markup

<div class="menu">
- [First item](#)
- [Second item](#)
- [Third item](#)
</div>

Styles

/* Tree-style menu | robertbirming.com */
.menu ul {
  padding: 0;
  padding-inline-start: 1.5rem;
  list-style: none;
  border-inline-start: 1px solid var(--border);
}

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

.menu li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.8em;
  inset-inline-start: -1.2rem;
  width: 0.5rem;
  height: 1px;
  background: var(--border);
}

.menu a {
  font-weight: 500;
}

.menu a:visited {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
}

Want more? Check out all available Bearming add-ons.

Happy blogging, branch by branch.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩