How to add separators between menu items

April 19th, 2026
Tips

Select your Menu Builder element and add one of the separator styles in Advanced / Custom CSS.

It will apply only on desktop view and won’t affect the mobile menu, which already uses its own separators.
You can easily adjust the width and height by updating the CSS variable values.

Basic Separators

%%SELECTOR%% nav:not(.breakdance-responsive-menu--open) > ul > li:not(:last-child)::after {
--w:4px;
--h:15px;
content: "";
position: absolute;
right:calc(var(--w) / 2 * -1);
top:50%;
transform:translateY(-50%);
width: var(--w);
height: var(--h);
background-color: #333;
}

Separators with Gradients

%%SELECTOR%% nav:not(.breakdance-responsive-menu--open) > ul > li:not(:last-child)::after {
--w:4px;
--h:20px;
content: "";
position: absolute;
right:calc(var(--w) / 2 * -1);
top:50%;
transform:translateY(-50%);
width: var(--w);
height: var(--h);
background: linear-gradient(0deg,rgba(195, 39, 34, 1) 0%, rgba(253, 187, 45, 1) 100%);
}

Circle Separators

%%SELECTOR%% nav:not(.breakdance-responsive-menu--open) > ul > li:not(:last-child)::after {
--w:6px;
--h:6px;
border-radius: 12px;
content: "";
position: absolute;
right:calc(var(--w) / 2 * -1);
top:50%;
transform:translateY(-50%);
width: var(--w);
height: var(--h);
background-color:var(--bde-brand-primary-color)
}

Slanted Separators

%%SELECTOR%% nav:not(.breakdance-responsive-menu--open) > ul > li:not(:last-child)::after {
--w:4px;
--h:25px;
content: "";
position: absolute;
right:calc(var(--w) / 2 * -1);
top:50%;
transform:translateY(-50%) skew(-15deg);
width: var(--w);
height: var(--h);
background-color: #333;
}