I can help you with creating the menu items themselves via a Blueprint, but not the presentation of the menu as you shared above. Grav does not have a visual menu builder, but as I mentioned you can use Blueprints to create Grav theme menus. Someone else here more experience in CSS/HTML might be able to help though…
Here is what a modified theme blueprint would look like to support creating a simple list of custom menu items (I am using the same Blueprint YAML as I use for my Bootstrap4 Open Matter Theme):
description: Theme Meza
keywords: grav, theme, etc
label: Dropdown in Menu
label: 'Display Custom Menu Items'
help: 'Determines if any defined custom menu entries are displayed in the menubar.'
label: 'Custom Menubar Items'
description: 'Text label for menu item.'
description: 'Font Awesome icon for menu item.'
description: 'URL for menu item.'
_blank: 'Open in a new window'
_parent: 'Open in the parent frame'
_top: 'Open in the full body of the window'
_self: 'Open in the same frame as clicked'
The above will allow you to create a simple list of custom menubar items in your Theme settings, and the results are saved to
I might still be not understanding what you are asking for - the above is to create custom menu items that are not Grav pages within a site. With the term ‘Menu Builder’ what exactly are you looking for? Depending on your needs etc you might also want to check out Gantry (http://gantry.org/) for Grav and RocketTheme Gantry themes (https://rockettheme.com/grav/themes).