Transparent, well-organized navigation is helping guests perceive a website online and transfer thru it with self assurance. That turns into particularly essential on content-heavy websites, the place documentation, classes, account pages, merchandise, or different nested content material desire a construction that is still simple to scan.
Divi Essential through Divi Subsequent expands the Divi toolkit with a big selection of specialised modules, extensions, and layouts constructed without delay into the Visible Builder.
Considered one of its modules, Divi Vertical Menu, will provide you with a devoted method to create vertical menus, accordion navigation, collapsible sidebars, flyouts, and cellular drawers whilst conserving all the workflow visible. The module is appropriate with each Divi 4 and Divi 5, making it helpful for present internet sites in addition to new Divi 5 builds.
On this product spotlight, we’ll take a more in-depth take a look at Divi Crucial, discover the Vertical Menu module’s key options, and construct an expandable vertical navigation menu from begin to end.
Assessment Of Divi Crucial
Divi Crucial is an all-in-one toolkit that extends the Visible Builder with modules, site-wide extensions, and ready-made design layouts. It’s constructed to paintings within the acquainted Visible Builder workflow and is absolutely appropriate with Divi 4 and Divi 5.
The gathering contains greater than 109 Divi modules, 28+ extensions, 720+ phase layouts, 40+ starter templates, and 8 pre-built internet sites. In combination, those gear give freelancers, companies, and web site homeowners a big set of establishing blocks for content material, animation, navigation, paperwork, and extra, with out leaving Divi.
New modules and extensions proceed to enlarge the gathering, together with the Divi Vertical Menu module we’ll center of attention on later on this put up.
109+ Modules
Divi Crucial provides greater than 109 modules that sit down along Divi’s local modules within the Visible Builder. The gathering covers on a regular basis content material wishes, movement and interactive results, carousels, workforce and social layouts, shape styling, and navigation gear such because the Vertical Menu. You’ll permit all or handiest the modules you wish to have, which is helping stay the web site lean whilst nonetheless providing you with a much broader vary of design choices. The whole thing is constructed to really feel local inside of Divi and works with each Divi 4 and Divi 5.
28+ Extensions
Past particular person modules, Divi Crucial contains 28+ extensions that upload capability throughout all your website online. Those gear reinforce menus, interactions, visible results, and workflow site-wide reasonably than residing as a single-page module. Examples come with an animated gradient, preloader animation, complicated popup builder, card, cursor, and particle results, textual content animations, video backgrounds, and utilities similar to reside reproduction paste, cache clearing, and extra. The result’s a collection of gear you’ll layer onto present Divi pages with out stacking additional plugins.
720+ Phase Layouts
Divi Crucial comes with greater than 720 pre-built phase layouts. Those sections quilt commonplace web page spaces from heroes, options, testimonials, pricing, CTAs, galleries, and extra, so you’ll construct polished pages sooner as an alternative of beginning each phase from scratch. Every format stays absolutely editable within the Builder and is designed to paintings with the plugin’s modules.
40+ Starter Templates
Along with particular person sections, Divi Crucial contains 40+ starter templates and eight+ complete pre-built internet sites. Those come up with forged, industry-ready foundations you’ll import, emblem, and refine. They’re particularly helpful when you wish to have an entire construction temporarily for a consumer, prototyping,, or websites that depend on transparent navigations and arranged content material. The whole thing remains editable inside of Divi, and new templates proceed to be added through the years.
A few of the more moderen additions to this rising toolkit is the Divi Vertical Menu module. It brings devoted vertical navigation choices without delay into the Visible Builder, giving Divi customers a extra versatile method to prepare complicated or content-heavy websites. Within the sections under, let’s take a detailed take a look at what the module provides and how you can construct with it.
Introducing The Divi Vertical Menu Module
The Divi Vertical Menu module is constructed for growing vertical navigation without delay inside of Divi. You’ll use it for sidebar menus, expandable class lists, account navigation, dashboards, documentation menus, flyouts, collapsible sidebars, and responsive drawers.
Considered one of its strengths is the number of menu assets it helps. You’ll generate navigation from WordPress menus, taxonomy phrases, or put up sort pages, then regulate what number of nested ranges seem.
The module contains 4 format varieties:
- Vintage Checklist
- Accordion
- Collapsible Sidebar
- Flyout
Every format offers the similar navigation a unique presentation, making it more uncomplicated to check the menu to the kind of website online you might be development. Submenu conduct may also be custom designed as effectively. Relying at the format, you’ll open nested pieces on click on or hover and come to a decision whether or not one or a number of submenu teams can stay expanded.
Default states, icons, badges, and submenu carets supply further tactics to make the hierarchy transparent.
The module additionally contains devoted responsive controls. The cellular format can inherit the desktop model, transfer to an Accordion, or change into an off-canvas drawer. You’ll outline the breakpoint, drawer facet, hamburger label, exterior cause, and different responsive conduct from the similar module.
Styling is in a similar fashion versatile. Menu pieces, submenus, icons, badges, carets, backgrounds, interplay states, and the off-canvas drawer can all be custom designed to check the remainder of the web site.
Key Options And Settings
As soon as the Vertical Menu module is added to a web page or Theme Builder template, its settings are arranged into the acquainted Divi interface. Listed here are the controls that make the largest distinction.
Menu Supply And Intensity
The Menu Supply settings decide what content material generates the navigation. To be had supply varieties come with WordPress menus, taxonomy phrases, and put up sort pages. The Max Intensity atmosphere controls what number of ranges of nested navigation seem.
That flexibility shall we the similar module paintings with very various kinds of internet sites. A easy sidebar would possibly handiest want one nested point, whilst a documentation construction can disclose a deeper hierarchy.
4 Format Sorts
The module provides 4 tactics to provide the navigation.
- Vintage Checklist shows the hyperlinks in a simple vertical stack. It really works effectively for easy sidebars and secondary navigation.
- Accordion shall we guests enlarge and cave in sections, conserving better menus extra compact.
- Collapsible Sidebar can condense the navigation right into a smaller state, making it a herbal have compatibility for dashboard-style interfaces.
- Flyout helps to keep the principle menu slim whilst revealing nested navigation in an adjoining panel.
The Format staff additionally contains choices for Alignment, Merchandise Spacing, Submenu Indent, and Sticky conduct.
The module will provide you with regulate over how nested navigation responds. Relying at the selected format, the submenu Cause can use Click on or Hover. The Open Conduct can stay one submenu open at a time or permit a number of sections to stay expanded.
You’ll additionally outline the beginning Default State, together with collapsed, expanded, or first-open configurations.
The Components staff supplies further visible cues. Allow icons to make top-level locations more uncomplicated to spot, badges to focus on decided on pieces, and submenu carets to be in contact which hyperlinks comprise further navigation.
Responsive And Accessibility Choices
The module features a devoted responsive workflow so the menu can adapt to smaller displays. Set the Cell Format to inherit the desktop model, transfer to an Accordion, or use an off-canvas drawer.
The Accessibility staff additionally contains an ARIA Label box, permitting you to supply an available identify for the navigation the place suitable.
As with all navigation device, check the completed menu with keyboard controls and around the related breakpoints to ensure expandable states, center of attention signs, labels, and drawers stay transparent.
Detailed Styling Controls
The Vertical Menu module will provide you with particular person design controls for the foremost portions of the navigation. Those teams come with acquainted controls for typography, colours, spacing, sizing, backgrounds, borders, shadows, and different visible main points.
The whole thing stays editable and previewable without delay within the Visible Builder.
How To Construct A Vertical Menu With Divi Crucial
Now let’s put the ones controls to paintings. For this case, we’ll create an expandable sidebar menu with nested pages, icons, responsive conduct, and transparent energetic states. Earlier than opening the Visible Builder, make certain Divi Crucial is put in and activated.
In the event you plan to make use of a WordPress menu because the supply, create that menu underneath Look > Menus. Upload the pages you wish to have, organize the dad or mum and kid relationships, and configure the menu-specific icon choices you need to make use of.
1. Upload The Vertical Menu Module
Open the web page or Theme Builder template the place the navigation will have to seem. Upload a Phase and Row if wanted, then click on Upload Module. Open the Divi Crucial assortment and make a choice Vertical Menu.
The menu seems without delay at the canvas, waiting to configure.
2. Select The Menu Supply
Open the Menu Supply staff within the Content material tab. For this case, make a choice WordPress Menu because the Supply Sort, then make a choice the menu you created previous.
You’ll use one of the crucial different supply varieties when the navigation will have to be generated from taxonomy phrases or put up sort pages as an alternative. Set Max Intensity in response to how a lot of the hierarchy you need to show.
3. Make a selection The Format
Open the Format staff. For a simple vertical menu, make a choice Vintage Checklist. For navigation with a number of expandable sections, make a choice Accordion.
We’ll use Accordion for this case so guests can divulge nested hyperlinks as they transfer in the course of the menu. Alter Alignment, Merchandise Spacing, Submenu Indent, and Sticky conduct from the similar staff as wanted.
Subsequent, make a choice how nested navigation will have to behave. For layouts that fortify each choices, the Cause may also be set to Click on or Hover. Accordion and Collapsible Sidebar layouts use Click on-based growth.
Use Open Conduct to come to a decision whether or not a number of sections can stay expanded or whether or not opening a brand new staff closes the former one.
Then make a choice the preliminary Default State. Relying at the construction, you’ll start with the whole lot collapsed, the whole lot expanded, or the primary phase already open.
5. Upload Icons, Badges, And Carets
Open the Components staff so as to add visible cues. Allow Display Icons and make a choice their place in case your navigation makes use of icons. You’ll additionally permit Display Badges for particular menu pieces and Display Submenu Caret for expandable dad or mum hyperlinks.
Use those parts to strengthen the hierarchy reasonably than beautify each merchandise similarly. Carets are particularly helpful for making expandable menu pieces in an instant recognizable.
6. Configure The Cell Revel in
Open the Responsive staff. Select how the vertical menu will have to adapt at smaller widths. You’ll inherit the desktop format, transfer to an Accordion, or use an off-canvas drawer.
For this case, we’ll use the off-canvas possibility so the navigation can keep to be had with out occupying the principle content material space on smaller displays. Set the Cell Breakpoint, make a choice the Drawer Facet, customise the Hamburger Label, and configure any exterior cause settings the design calls for.
7. Upload An ARIA Label
Open the Accessibility staff and input an ARIA Label when the navigation wishes an available identify. As an example, a documentation sidebar may use Documentation Navigation, whilst an account space may use Account Navigation.
As soon as the menu is entire, check the navigation with a keyboard and at the related software sizes to ensure the entire interplay stays transparent.
8. Taste The Menu Pieces
Transfer to the Design tab and open the Menu Pieces staff. Use the typography controls to set the font, weight, measurement, colour, line top, and any supported variable font settings.
Use the Spacing controls to regulate the margin and padding round each and every merchandise.
Then genre the other interplay states. The module contains controls for normal, hover, and energetic textual content and background colours, giving guests transparent comments as they transfer in the course of the navigation.
Energetic states are in particular useful in longer navigation constructions as a result of they make the customer’s present location in an instant visual.
9. Taste The Icons, Badges, And Carets
Open the Icon, Badge, and Caret teams. Alter their measurement, colour, padding, background, border radius, and different to be had design settings.
Stay each and every cue tied to a transparent function. Icons could make top-level classes more uncomplicated to spot, badges can spotlight essential locations, and carets be in contact expandable construction.
Open the Submenu staff to genre the nested container. Set its background, spacing, border, and field shadow.
Then use the Submenu Pieces staff to regulate the nested hyperlinks themselves. Set their typography, spacing, merchandise hole, commonplace textual content colour, hover state, energetic state, and background colours.
A slight distinction in indentation, measurement, colour, or background is helping distinguish the submenu hierarchy from the dad or mum navigation.
11. Wonderful-Track The Animation
Open the Animation settings to regulate how expandable parts transfer. Use Increase Length to regulate the timing and make a choice the easing genre of your selection.
Stay navigation animations responsive sufficient that the interface reacts in an instant whilst nonetheless giving the growth a refined transition.
12. End The Menu Container
After all, genre the whole container. Use the Background staff to create a definite navigation floor when the design requires one.
Further Border, Field Shadow, Spacing, and Sizing teams lend a hand refine the whole form and site.
The module additionally contains Divi’s acquainted Complex tab, providing you with get entry to to settings similar to Attributes, Customized CSS, Stipulations, Place, Scroll Results, Transitions, and Visibility.
The Outcome
With the settings in position, the result’s a structured vertical navigation device with transparent dad or mum and kid relationships, expandable sections, responsive conduct, energetic states, and styling that matches the remainder of the website online.
The similar module can then be tailored for class navigation, wisdom bases, documentation, club spaces, dashboards, retailer classes, or another format the place vertical navigation fits the content material.
Who Is The Vertical Menu Module For?
The Vertical Menu module can have compatibility quite a lot of Divi initiatives.
- Businesses and freelancers can use it to create repeatable navigation patterns for various shopper necessities.
- Documentation and data base websites can use expandable menus to prepare better data hierarchies.
- Club websites and dashboards can use the Collapsible Sidebar format to stay account navigation available whilst maintaining area for the principle content material.
- Bloggers and publishers can use menu or taxonomy assets to prepare classes and sections.
- WooCommerce retail outlets can create vertical class constructions that make better catalogs more uncomplicated to browse.
And when the navigation wishes to switch form throughout units, the module’s Accordion and off-canvas choices come up with a responsive workflow inside of the similar set of settings.
The Divi Vertical Menu module will provide you with a targeted method to create structured vertical navigation whilst staying within the Divi 5 Visible Builder. Select the place the menu content material comes from, regulate its intensity, transfer between Vintage Checklist, Accordion, Collapsible Sidebar, and Flyout layouts, configure submenu conduct, upload visible cues, outline the cellular enjoy, and elegance each and every a part of the navigation from one module.
As a part of Divi Essential, the Vertical Menu module joins a selection of greater than 109 modules, 28 extensions, 720 phase layouts, 40 starter templates, and eight pre-built internet sites. Divi Crucial is appropriate with each Divi 4 and Divi 5, so the similar toolkit can fortify present websites and new Divi 5 initiatives. The Limitless license is incessantly indexed at $79 and contains limitless website online utilization, 365 days of fortify and updates, and a 30-day money-back ensure. Market promotions might scale back the present acquire worth.
For Divi customers who incessantly construct sidebars, dashboards, documentation menus, class navigation, or responsive drawers, the Vertical Menu module provides a refined and extremely configurable navigation workflow to the Divi toolkit.
The put up Divi Product Highlight: Divi Essential gave the impression first on Elegant Themes Blog.
0 Comments