Table of contents

Why remove path navigation from WordPress URLs?Set up clean permalinks in WordPress settingsRemove trailing slashes from URLsHide parent slugs from child page URLsClean up category and tag base slugsHandle redirects after URL changesBonus: Consider performance and cachingNext stepsAdditional resources

Get the industry’s fastest hosting for WordPress◦ 100% network uptime
◦ Comprehensive security
◦ 24/7 support

WordPress Guide → Admin → Menu

WordPress admin menu: how to add a separator to a submenu

The WordPress admin menu can get cluttered fast, especially if you’re building a plugin or a site with lots of custom post types. Sometimes, you need to group related submenu items—or break things up for clarity. But there’s just one problem: WordPress doesn’t give you a built-in way to add separators inside a submenu.

With a bit of custom code, though, you can make this work.

Let’s walk through three ways to add a submenu separator … and one way to make it even better using simple CSS.

Get fast, reliable hosting for WordPress

Power your site with the industry’s fastest, most optimized WordPress hosting

WordPress.org hosting

Method 1: Add a fake submenu page as a visual separator

This is the most straightforward way to insert a visual break between submenu items. Here’s how it works:

1. Hook into the admin_menu action

To customize the WordPress admin menu, you need to use the admin_menu action in your theme’s functions.php file or in a custom plugin.

add_action('admin_menu', 'custom_add_submenu_separator');

This line tells WordPress to run your function when it builds the admin menu.

2. Use add_submenu_page() to add a blank or stylized item

You’ll now write the function that adds a submenu item that looks like a separator.

function custom_add_submenu_separator() {
    add_submenu_page(
        'tools.php',              // Parent slug (this example adds to Tools menu)
        '',                       // Page title (not shown)
        '—',                      // Menu title (a dash acts as a visual line)
        'manage_options',         // Capability required to see this
        'submenu-separator',      // Slug (should be unique)
        '__return_null'           // Callback function (blank page)
    );
}

3. Why the dash works

Using — (em dash) or even a few dashes like —— in the menu title makes the submenu item look like a divider. You can’t create a real line or spacing, but this gives the impression of a break.

The __return_null callback tells WordPress to do nothing when someone clicks it, avoiding errors.

Method 2: Make your separator item look different with CSS

If you want more control over how the separator looks—like gray text, italic font, or no hover effect—you can target the submenu item with CSS.

1. Give your submenu item a unique slug

You already did this in Method 1 with ‘submenu-separator’. This gives us something to target.

2. Add CSS in the admin area

Use the admin_head hook to inject a <style> block into the admin area.

add_action('admin_head', 'style_custom_submenu_separator');

function style_custom_submenu_separator() {
    echo '<style>
        #adminmenu .wp-submenu a[href*="submenu-separator"] {
            pointer-events: none;
            color: #999;
            font-style: italic;
        }
    </style>';
}

3. What this CSS does

pointer-events: none; disables clicking the submenu item.
color: #999; makes it gray.
font-style: italic; makes it visually distinct from normal items.

You can customize this even further with icons, background colors, or padding.

Method 3: Use a heading-style label instead of a line

Sometimes a separator isn’t the best option. Instead, you might want a section label—like a non-clickable heading inside the submenu.

Here’s how to do that:

add_submenu_page(
    'tools.php',
    'Section Heading',            // Page title
    '— Custom Tools —',           // Menu label appears like a heading
    'manage_options',
    'submenu-heading',
    '__return_null'
);

This won’t act like a separator line, but it helps organize items by category. Combine this with CSS to make it bold, uppercase, or colored for better effect.

Optional: Only show separators to certain users

If your site has multiple roles (like Editors, Authors, Admins), you may want separators to appear only for admins—especially if they’re the only ones who need to see advanced tools.

Here’s how to conditionally register the separator:

function custom_add_submenu_separator() {
    if (current_user_can('manage_options')) {
        add_submenu_page(
            'tools.php',
            '',
            '—',
            'manage_options',
            'submenu-separator',
            '__return_null'
        );
    }
}
add_action('admin_menu', 'custom_add_submenu_separator');

This helps keep the interface simpler for non-admin users.

Bonus: Use Dashicons or Unicode symbols for more visual separators

You can get creative with submenu separators by using icons or Unicode characters. This makes them more noticeable—and often easier to scan quickly.

Ideas to try:

⋯ (Midline Ellipsis)
⚙ (Gear)
▸ (Right arrow)
dashicons-minus or dashicons-editor-insertmore via inline CSS or :before content

To use Dashicons with CSS:

#adminmenu .wp-submenu a[href*="submenu-separator"]::before {
    font-family: dashicons;
    content: "\f460";
    margin-right: 6px;
}

This adds a “divider” icon in front of your submenu label. Make sure to enqueue Dashicons if you’re not already using them.

Next steps for WordPress admin menu separators

Adding separators to submenu items isn’t natively supported, but you can easily work around this with a bit of smart code and styling. Whether you use dashes, headings, or custom icons, your submenu can become more intuitive and easier to navigate—especially for clients or teams.

Start by choosing the method that fits your layout best, then test it in your theme or plugin.

Ready to upgrade your WordPress experience? Professional hosting improves speeds, security, and reliability for a website and a brand that people find engaging and trustworthy.

Don’t want to deal with server management and maintenance either? Our fully managed hosting for WordPress is the best in the industry. Our team are not only server IT experts, but WordPress hosting experts as well. Your server couldn’t be in better hands.

Click through below to explore all of our hosting for WordPress options—including VPS and dedicated servers—or chat with a WordPress expert right now to get answers and advice.