BlockStrap Documentation

BS > Nav Dropdown

Block Description

The BS > Nav Dropdown Block provides a dynamic navigation structure, allowing for an organized and nested view of website content. This block enables a dropdown menu in your navigation bar, ensuring a clean and neat design, especially for sites with extensive menus.

Block Features

The BS > Nav Dropdown Block allows customizing the link text and adding an optional icon. It supports various styles for the dropdown link including none, button, button rounded, icon box bordered, and icon box filled. Typography adjustments and custom CSS classes are supported for additional customization. Visibility settings are included, providing control over when the dropdown should be displayed.

Block Options


  • Link
    • LINK TEXT (Text Input): Specify custom text for the dropdown link. If left blank, dynamic text will be used.
    • ICON CLASS (Text Input): Add an optional icon to the dropdown link by entering the respective icon class.


  • Link Styles
    • LINK STYLE (Dropdown): Choose a style for the dropdown link. Options include None, Button, Button Rounded, Icon Box Bordered, and Icon Box Filled.
    • Size (Dropdown): If the button option or icon box is selected, this option will be available to select the size from a list of options.
    • COLOR (Dropdown): If the button style is selected, this option will be available to select a color from your theme’s palette.
    • LINK DIVIDER (Dropdown): Choose to add a divider line to the dropdown link. Options include None, Left, or Right.
  • Typography
    • TEXT COLOR (Dropdown): Select a color for the dropdown link text from your theme’s color palette.
    • Text Justify (Checkbox): If checked, the dropdown link text will be justified.
    • TEXT ALIGN (Dropdown): Control the alignment of the dropdown link text.


  • Wrapper Styles
    • Margins: Adjust the spacing around the dropdown block for optimal alignment within the page layout.
    • Padding: Modify the internal padding of the dropdown block to ensure appropriate space around the content.
    • BORDER COLOR (Dropdown): Choose a border color for the dropdown block from your theme’s color palette.
    • SHADOW (Dropdown): Add a shadow effect to the dropdown block for a more defined appearance.
  • Visibility Conditions
    • BLOCK VISIBILITY (Modal): Define the conditions under which the dropdown block should be visible.
  • Advanced
    • ADDITIONAL CSS CLASS(ES) (Text Input): Add extra stylizations to the dropdown block by entering custom CSS classes. Multiple classes should be separated by spaces.