Skip to main content

Navbar

Overview

Navbar displays a menu for navigation with an optional hamburger mode for mobile devices.


Parameters

ParameterParameterValid BlocksRequired
ChildrenChildren componentNavbar Component Block GroupNo
Style SetsOptional list of Email Style blocks to apply to this blockText Block GroupNo
Custom CSS ClassesOptional space-separated list of CSS classes to be applied to the element. Intended for use with EmailCSS blocks.Text Block GroupNo
Base URLThe base URL for the items in the navigation.Text Block GroupNo
Collapse Menu on MobileIf true, show the navbar as a collapsable menu on mobile.Boolean Block GroupNo
Open Icon CharacterThe character code of the character to be used for the open menu icon. Defaults to ☰ (9776).Text Block GroupNo
Close Icon CharacterThe character code of the character to be used for the close menu icon. Defaults to ⊗ (8855).Text Block GroupNo
Icon ColourThe colour of the hamburger icon. Defaults to #000000 (black)Colour Block GroupNo
Icon SizeThe size of the icon.Unit Value Block GroupNo
Icon Line HeightThe line height to use for the menu icon.Text Block GroupNo
Icon AlignmentThe alignment of the menu icon.Text Block GroupNo
Icon DecorationAdditional decoration to apply to the menu icon.Text Block GroupNo
Icon TransformAn optional text transformation to apply the menu icon.Text Block GroupNo
Icon FontThe list of preferred fonts for the mobile menu icon.Text Block GroupNo
Menu Icon PaddingThe padding around the menu icon.Text Block GroupNo
Menu Icon Padding BottomThe padding below the menu icon.Unit Value Block GroupNo
Menu Icon Padding LeftThe padding to the left of the menu icon.Unit Value Block GroupNo
Menu Icon Padding RightThe padding to the right of the menu icon.Unit Value Block GroupNo
Menu Icon Padding TopThe padding above the menu icon.Unit Value Block GroupNo
Horizontal AlignmentHow the block should be aligned horizontally within its container.Text Block GroupNo