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.

Custom popup content

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 the recommended most 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 an alteration has been made.

Using page content in popup
Content examples
<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 bulletless 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 bulletless 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 we used a basic segment containing an icon header and a grid. 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
<menu large vertical fluid marginless borderless>
  <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.

Leave a comment

Your email address will not be published. Required fields are marked *