Menu Separator

[ogoffart]

We should add a MenuSeparator {} (or just Separator{} ?) element in Menu that acts as a menu separator

Menu {
    MenuItem { ... }
    Separator{}
    MenuItem { ... }
    MenuItem { ... }
    Separator{}
    MenuItem { ... }
}

Separator at the beginning or at the end should be ignored. Multiple separator in a row should result in only one separator.

[tronical]

An idea that @NigelBreslaw brought up was instead of a Separator {}, use grouping:

Menu {
    MenuItemGroup {
        MenuItem { ... }
        MenuItem { ... }
    }
    MenuItem { ... }
}

Separators are inserted automatically at the edges of groups, unless they are at the beginning or the end of the menu. Between two adjacent groups, only one separator gets inserted.

This approach also has the advantage that it plays well with dynamic menus and avoids having to have logic that eliminates trailing or leading separators.

[ogoffart]

This approach also has the advantage that it plays well with dynamic menus

Could you elaborate?

avoids having to have logic that eliminates trailing or leading separators.

That's not very elaborate logic. The logic to understand MenuItemGroup and place separator accordingly seems more elaborate.

[NigelBreslaw]

I looked into this a bit more and although React Native Reusables(RnR) abstracts the separator away, the libraries that inspired it like Radix and Shadcn have a separator. Which seems to make sense as the 2 later libraries should allow you to make anything, while RnR is bit more restrictive to do more things automatically for you. So probably the lower level menu should have a separator? RnR does make sense though because MenuGroups are not the only group it offers. You don't have to explicitly say 'this is a submenu'. You add a MenuSub group. Same for radio menus which are just menu items inside a MenubarRadioGroup.

[NigelBreslaw]

https://rnr-docs.vercel.app/components/menubar/