The Navigation Block allows you to create flexible, responsive navigation menus for your website. You can use existing WordPress menus or build custom navigation from scratch with full control over styling, layout, and mobile behavior. Perfect for a custom header, you can actually use any blocks with our DigiFusion theme and its site builder feature from DigiFusion Pro.
Adding a Navigation Block
Navigate to the post or page where you want to display Navigation. Click the block inserter (+) and search for “Navigation” in the DigiBlocks Theme category. Click to insert the block into your content.
Menu Configuration
Menu Types
The Navigation Block supports two types of menus:
WordPress Menu
- Select from existing WordPress menus created in Appearance > Menus
- Automatically displays all menu items and submenus
- Maintains menu structure and hierarchy
Custom Menu
- Build navigation items directly within the block
- Add custom links, text, and icons
- Full control over each menu item
Setting Up WordPress Menus
- Set Menu Type to “Menu”
- Choose your desired menu from the Select Menu dropdown
- The block will load and display all menu items automatically
Creating Custom Navigation
- Set Menu Type to “Custom Menu”
- Click Add Navigation Item to create new menu items
- Click on any menu item to edit its text inline
- Use the item controls to configure links, icons, and ordering
Layout Options
Orientation and Alignment
Orientation
- Horizontal: Items display in a row (default)
- Vertical: Items stack vertically
Alignment
- Left: Align items to the left
- Center: Center items
- Right: Align items to the right
- Spread: Distribute items evenly across available space
Flex Wrap
- Nowrap: Keep all items on one line
- Wrap: Allow items to wrap to new lines when needed
Columns and Spacing
Columns (Horizontal orientation only)
- Set number of columns for grid-style layouts
- Range: 1-6 columns
- Responsive controls for different devices
Item Spacing
- Control gap between navigation items
- Range: 0-50px
- Responsive controls available
Mobile Settings
Mobile Toggle
Enable a hamburger menu for mobile devices:
- Toggle Show Mobile Toggle on
- Set Alignment for the toggle button (Left, Center, Right)
- Adjust Toggle Button Size (32-80px)
- Configure Mobile Breakpoint (320-1200px)
Mobile Behavior
Mobile Breakpoint
- Set the screen width where mobile menu activates
- Default: 768px
Mobile Full Width
- Make navigation span full container width on mobile
- Useful for mobile-optimized layouts
Styling Options
Link Appearance
Padding
- Add internal spacing to navigation links
- Responsive controls for each device
- Set different values for top, right, bottom, left
Border Radius
- Round the corners of navigation links
- Supports pixels and percentage units
- Responsive controls available
Typography
- Font family, size, weight, and style
- Line height and letter spacing
- Text transform and decoration options
Border Styling
Link Borders
- Choose from 9 border styles (solid, dotted, dashed, etc.)
- Set border width for each side independently
- Configure border colors for normal and hover states
Toggle Icon Borders
- Separate border styling for mobile toggle button
- Independent border radius controls
- Background and border color options
Color Controls
Normal State Colors
- Link text color
- Background color
- Border color (when borders enabled)
Hover State Colors
- Link hover text color
- Hover background color
- Hover border color
Toggle Icon Colors
- Icon color for normal and hover states
- Background color for toggle button
- Border colors when borders enabled
Submenu Colors
- Submenu background color
- Submenu border color
- Mobile submenu specific colors
Visual Effects
Link Effects
Choose from various hover effects:
- None: No special effects
- Underline: Animated underline on hover
- Overline: Animated line above text
- Border Bottom: Border appears at bottom
- Border Top: Border appears at top
- Background Slide: Sliding background animation
- Scale: Slight scaling effect on hover
Submenu Effects
Control how submenus appear:
- Fade: Smooth opacity transition
- Slide Up: Slide up from below
- Slide Down: Slide down from above
- Scale: Scale animation
Custom Menu Item Controls
When using custom menus, each item provides these controls:
Icon Management
- Add Font Awesome icons to menu items
- Position icons before or after text
- Full icon library access
Link Settings
- Set destination URLs
- Configure “Open in new tab” option
- Add rel attributes for SEO
Item Organization
- Move items up or down
- Duplicate existing items
- Remove unwanted items
Advanced Features
Animation Effects
Apply entrance animations to the entire navigation:
- Choose from fade, slide, zoom, and bounce effects
- Preview animations in the editor
- Animations trigger when element enters viewport
Visibility Controls
Hide navigation on specific devices:
- Hide on Desktop: Hide for screens 992px and wider
- Hide on Tablet: Hide for screens 768-991px
- Hide on Mobile: Hide for screens 767px and smaller
Custom Attributes
HTML Anchor
- Add unique anchor ID for direct linking
- Creates jump links to navigation sections
Additional CSS Classes
- Add custom CSS classes for advanced styling
- Multiple classes separated by spaces
Responsive Design
The Navigation Block is fully responsive with device-specific controls:
Desktop Controls
- Full layout and styling options
- Multi-column layouts available
- Complete submenu support
Tablet Optimization
- Adjusted spacing and sizing
- Simplified layouts when needed
- Touch-friendly interaction
Mobile Features
- Hamburger menu toggle
- Collapsible menu system
- Touch-optimized spacing
- Full-width options
Best Practices
Menu Structure
Keep It Simple
- Limit top-level items to 7 or fewer
- Use clear, descriptive labels
- Group related items in submenus
Mobile Considerations
- Test on various mobile devices
- Ensure touch targets are adequate (44px minimum)
- Consider vertical space limitations
Performance Tips
Icon Usage
- Use icons sparingly for better performance
- Choose simple, recognizable icons
- Maintain consistent icon style
Animation Effects
- Use subtle animations for better user experience
- Avoid excessive effects that may distract
- Test animations on slower devices
Accessibility
Keyboard Navigation
- Ensure all menu items are keyboard accessible
- Test tab order and focus states
- Provide clear focus indicators
Screen Readers
- Use descriptive link text
- Avoid “click here” or generic labels
- Structure menus logically
The Navigation Block provides comprehensive controls for creating professional navigation menus that work seamlessly across all devices while maintaining excellent performance and accessibility standards.