Inline List: Pipe | CBP UI Library

<ul class="inlineList inlineList--wrap inlineList--pipe u-bold u-uppercase u-step-2"> {% for letter in range('a', 'z') %} <li class="inlineList__item"><a href="#" class="pageLink u-noUnderline">{{ letter }}</a></li> {% endfor %} </ul> {% import "_macros.twig" as h %} {{ h.componentAssets('inline-list') }}

.inlineList { display: flex; gap: var(--inlineListGap, 0.5em); align-items: center; padding-inline-start: 0; // in the case of ul.inlineList } .inlineList--wrap { flex-wrap: wrap; } .inlineList__item { margin-block-start: 0; list-style: none; } @property --inlineListSep { syntax: "*"; inherits: true; initial-value: "|"; } .inlineList--pipe { .inlineList__item:has( ~ .inlineList__item) { &:after { content: var(--inlineListSep); margin-inline-start: var(--inlineListGap, 0.5em); } } }

/** * For any list of `.inlineList--pipe > .inlineList__item`, if an item is teh last one on the line, it will remove the `|` separator */ export default function () { const items = document.querySelectorAll(".inlineList--pipe .inlineList__item"); let previousY; items.forEach((item, index) => { const bbox = item.getBoundingClientRect(); if (bbox.y !== previousY) { const previous = items[index - 1]; if (previous) { previous.style.setProperty("--inlineListSep", "''"); } } previousY = bbox.y; }) }

Accessibility

Lists are lists, regardless of direction. Hence, even an ‘inline’ list should get marked up as such for accessibility.

Ideally, use semantic HTML (<ul> and <li>) when possible. Alternatively, you can also use role="list" and role="listitem".

Modifiers

–wrap

.inlineList--wrap

Allows the list to wrap to new lines by applying flex-wrap: wrap.

–pipe

.inlineList--pipe

Adds a separator, pipe (|) by default, after each .inlineList__item, except for the last one.

Separators

Use .inlineList--pipe to add a separator to the lists. The default is a pipe |. Modify it with the --inlineListSep css custom property:

.inlineList.inlineList--pipe {
    --inlineListSep: "-";
}

Removing Hanging Separators

If the pipe and wrap modifiers are combined, a likely situation is that the wrapping will occur between items, in which case the last item on each line with have a hanging (or orphan) separator.

To deal with this, a utility JS function is included in this component which will remove any such separators on all .inlineList--pipe lists:

import removeOrphanPipe from "./remove-orphan-pipe.js";

removeOrphanPipe();

Note: despite the apparent misnomer, this JS function will remove the separator regardless if it is a pipe or something else.