In Navigation Separator for React

A vertical Separator stretches to the height of its parent, so one h-5 on the nav sizes every line at once, and they always match the row. A height on each separator works too, but has to be repeated and kept in sync.

gap-2 (8 pixels) keeps a compact header; gap-4 suits sparse utility links. Use flex gap rather than space-x-*: it spaces the links and the lines evenly, with no margins to fight.

When several inline links start to blur together and you want a lighter cue than button borders. Breadcrumbs usually take a chevron, not a line, and stacked mobile menus don't need vertical separators at all.

No. The line is structure and the link is the target: hover and focus styles stay on the links.

While the links stay in a row, yes. When the menu stacks into full-width items, hide the separators: a vertical line between stacked items is noise.

The links sit in a nav landmark with an aria-label, and the separators never take focus, so keyboard users move from link to link. The lines are exposed as separators and can be announced between links; if that's noise for your users, a border on each link is quieter.