Custom popup menus
Enabling “popup mode” on menu items in the WordPress menu editor allows to add custom content to the popups. The custom content will only be displayed in the main menu, so the root menu item still needs to have child items to provide alternative content for mobile, AMP or sticky menu context.
While the custom content area can just be plain text you’ll likely want to format it with shortcodes and add HTML anchor tags. For that reason a clean and manageable way to handle this would be to create a private page to house the content, and in the custom content area just place the shortcode to render the page. That way there’s no need to use a small textarea and save the whole menu every time a change needs to be made – you can just edit the page instead.
Popup menu content examples
Docs popup
Documentation
Working with powerful shortcodes and flexible theme options.
Getting started
Creating content
View the latest changelog.
<segment basic>
<header large url="/documentation" icon="book">
Documentation
<subheader normal>Working with {lt}strong{gt}powerful shortcodes{lt}/strong{gt} and {lt}strong{gt}flexible theme options{lt}/strong{gt}.</subheader>
</header>
<divider hidden>
<grid equal width two column>
<column>
<header>Getting started</header>
<list large link>
<item url="/installing-chap">Installing Chap</item>
<item url="/using-chap-child">Using a child theme</item>
<item url="/setting-up-amp">Setting up AMP</item>
<item url="/css-helper-classes">Helper CSS classes</item>
</list>
</column>
<column>
<header>Creating content</header>
<list large link>
<item url="/documentation/shortcodes">Shortcodes</item>
<item url="/composites">Composites</item>
<item url="/wordpress-menus">WordPress menus</item>
<item url="/creating-galleries">Galleries</item>
</list>
</column>
</grid>
</segment>
<message marginless info><icon info>View the latest {lt}a href="/category/changelog"{gt}changelog{lt}/a{gt}.</message>Notes
For the documentation popup a basic segment containing an icon header and a grid is used. The popup width is set to 360px.<menu big secondary vertical fluid marginless>
<item url="#"><header icon="home">Home<subheader normal>Our homepage</subheader></header></item>
<item url="#"><header icon="bullhorn">About<subheader normal>Find out more</subheader></header></item>
<item url="#"><header icon="edit">Blog<subheader normal>Periodic updates</subheader></header></item>
<item url="#"><header icon="book">Categories<subheader normal>All our content</subheader></header></item>
<item url="#"><header icon="mail">Contact<subheader normal>Get in touch with us</subheader></header></item>
<item url="#"><header icon="cart">Shop<subheader normal>Buy our products</subheader></header></item>
</menu>Notes
Popup can be inverted in the WordPress menu editor.<grid two column>
<column>
<menu big secondary vertical fluid marginless>
<item url="#"><header icon="home">Home<subheader normal>Our homepage</subheader></header></item>
<item url="#"><header icon="bullhorn">About<subheader normal>Find out more</subheader></header></item>
<item url="#"><header icon="edit">Blog<subheader normal>Periodic updates</subheader></header></item>
</menu>
</column>
<column>
<menu big secondary vertical fluid marginless>
<item url="#"><header icon="book">Categories<subheader normal>All our content</subheader></header></item>
<item url="#"><header icon="mail">Contact<subheader normal>Get in touch with us</subheader></header></item>
<item url="#"><header icon="cart">Shop<subheader normal>Buy our products</subheader></header></item>
</menu>
</column>
</grid>Notes
Popup width set to 480px.Bottom attached segment
Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot.
<menu large vertical fluid marginless style="border:0">
<item url="#"><header icon="home">Home</header></item>
<item url="#"><header icon="bullhorn">About</header></item>
<item url="#"><header icon="edit">Blog</header></item>
</menu>
<segment secondary bottom attached>Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot.</segment>Notes
Popup width set to 300px, padding disabled. Borderless class cannot be used for menus, so an inline style can be used.