Block Description

The BS > Nav Block is a powerful component of the BlockStrap suite designed to create flexible navigation structures on your website. This block handles the organization and presentation of navigational items, whether within a Navbar that collapses on mobile devices or as a standalone entity that remains expanded.

Block Features

The BS > Nav Block provides the ability to determine the orientation of your navigational items, choose between default, tabs, or pills styles, and control the justification and fill properties of the navigation items. Moreover, it offers extensive style customization options for typography, background color, margins, padding, border color, and shadow, as well as advanced customization capabilities with additional CSS classes.

Block Options

Style

• Nav Styles
  • USAGE (Dropdown): This option allows you to determine whether the navigation block should be used inside a Navbar (and thus collapse on mobile) or standalone (always visible).
  • HORIZONTAL / VERTICAL (Dropdown): Decide the orientation of the navigation items in the block.
  • NAV STYLE (Dropdown): Customize the appearance of your navigation items. Options include Default, Tabs, or Pills.
  • JUSTIFY CONTENT (Dropdown): Control the horizontal alignment of the navigation items with options such as Default, Start, End, Center, Between, and Around.
  • FILL / JUSTIFY (Dropdown): Determine whether the navigation items should fill up the available space or should be justified. The options include No, Justify, and Justify equal width.

• Typography
  • FONT SIZE (Dropdown): Select the size of the text for the navigation items from the available options.

Advanced

• Wrapper Styles
  • BACKGROUND COLOR (Dropdown): Choose a background color for the navigation block from your theme’s color palette.
  • Margins: Adjust the margins around the navigation block for optimal spacing.
  • Padding: Modify the internal padding of the navigation block for ideal content separation.
  • BORDER COLOR (Dropdown): Select a border color for the navigation block from your theme’s color palette.
  • SHADOW (Dropdown): Add a shadow effect to the navigation block for an enhanced visual appeal.
  • WIDTH (Dropdown): Set the width of the navigation block. Options include Default, Auto, and percentages from 25% to 100%.

• Advanced
  • ADDITIONAL CSS CLASS(ES) (Text Input): Add extra stylizations to the navigation block by entering custom CSS classes. Remember to separate multiple classes with spaces.