Menu Separator for React

When each item has a title and a supporting line, such as Settings with Manage preferences. A plain row of links, as in the In Navigation example, is enough when the label says it all.

The row is a flex container with items-center, and a vertical Separator stretches to the row's height, which is set by the two-line items. Don't give the Separator a fixed height; let the content decide.

Three labeled columns overflow a 320 pixel screen. The Help item and the line before it are hidden below md, so the first two items and their line still read as a split row.

gap-2 on small screens and md:gap-4 once there's room, as here, so the line never sits against the text.

Yes. The default is horizontal, which would draw a full-width line between the columns. Set orientation="vertical" on each separator in a row.

The titles carry the meaning; the lines are visual. If the items are destinations, wrap them in a nav; if they're static text, a plain div is enough. The lines are exposed as separators; use a border on the items instead if you don't want them announced.