Nav
Coming soon...
The
nav block is the ultimate no-code mega menu builder that allows you to create the ultimate navigation experience for your users.
You can craft a fully customisable, easy to use, multi-level, single markup menu that displays a range of navigation choices in an optimised layout from desktop to mobile devices.
The Cwicly Nav block is specifically designed with focused accessibility in mind.
With an increasing number of users browsing the web on mobile devices, Cwicly manages all the gear changes between different breakpoints and modal views, optimising user experience at every level thanks to smart single markup.
You can also apply pre-made styling options in a click.
We have made it easy to add or remove items from your menu using three different blocks:
The Nav Link block, which is a simple link
The Nav Dropdown block, to group multiple links within a dropdown or add your own custom blocks.
The Nav Menu block, to import a WordPress menu directly into your mega menu
For added flexibility, these blocks are contained within the Nav Items block, allowing you to add custom blocks to the main Nav block structure while respecting accessibility guidelines.
- Open the Block inserter and find the
navblock. - Click to add it to your page.
- You can choose between a Preset Nav to get you started or a Blank Nav which will give you the bare bones.
- Click the Preset Nav.
- The preset nav comes with all the necessary elements to make a fully functioning mega menu that can be customised as required.
- As you can see, the modal view is automatically set up and will adjust to any changes that are made.
You will find:
- A nav dropdown block (Home) with two groups, their titles and descriptions.
- A nav dropdown block (Solutions) with the addition of a pre-styled footer section
- A simple link block (New Link) with its link set to cwicly.com.
- A custom dropdown (Custom Dropdown) with a simple header and paragraph.
- The Nav Dropdown Block (Home) comes with 2 Groups, each with a sample title and 3 linked items. You can also add a Footer block if required.
- Alternatively the Nav Dropdown Block (Solutions) Comes with a Footer in addition to the Body.
- The sample Menu Title can easily be changed as required.
- Find Menu Title in the Settings tab of the Primary tab.
- Input required Menu Title.
Custom Content can be toggled on to allow you to add blocks as required.
- When toggled on, Custom Content will remove the preset dropdown content, allowing you to add new blocks.
The Body and Footer buttons allow you to edit the Body or Footer separately as you can have two distinct sections to your Nav, each with their own settings and styles.
The Nav is set, by default, to Body.
The Body is the upper section of the Nav Dropdown Block and can be fully customised from the Primary tab.
This applies to Modal view, and allows you to choose whether or not to allow a multilevel structure.
- To enable or disable Multilevel, in the Settings tab of the Primary tab, choose Multilevel true or false.
- With Multilevel (true).
- Without Multilevel (False).
- As you can see, all levels are shown at the same time.
You can add Dividers between groups as required. They are automatically positioned and the necessary number provided.
- To add a Divider, set Divider to "True".
- This will create a space between the groups where you can style your Divider.
- The Divider can be styled as required from the Styles tab.
Placing elements in Groups allows you to group multiple links inside a particular category while retaining freedom in form and control over every element.
To add a group, find Group and click the "+" Icon. This will add a new Group with a Title and Link field at the end of any other Groups.
To remove a Group, click the Trash icon to the right of the Group you wish to remove.
Last modified 7d ago