{"id":2428,"date":"2023-02-23T20:31:40","date_gmt":"2023-02-23T20:31:40","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/how-to-display-dropdown-tabs\/"},"modified":"2025-01-20T10:58:04","modified_gmt":"2025-01-20T10:58:04","slug":"how-to-display-dropdown-tabs","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-display-dropdown-tabs\/","title":{"rendered":"How To Display Dropdown Tabs"},"content":{"rendered":"\n

The Reveal component is used to show content when someone clicks or hovers over some other piece of content. Often-times, Reveals are used to add interactivity in the middle of the page but can also be used to create dropdown menus for navigation.<\/p>\n\n\n\n

Before we begin, you will want to have an understanding of how to work with the Reveal component. For details on how to work with the Reveal component,\u00a0click here<\/a>.<\/p>\n\n\n\n

To set up dropdown navigation, drag the Reveal component into a column or container.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Your Reveal will be set up to show the Reveal Container on hover by default. To make the links show below your main tab, update the \u201cPosition\u201d setting to \u201cBelow.\u201d You\u2019ll also likely want to apply a tag to your Reveal to see how many respondents interact with it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, add text to the Reveal Trigger. This will serve as the tab your respondents will hover over to view the dropdown navigation links. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Finally, add links to the Reveal Container that you want to show respondents when they hover over the tab. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After adding each link, you will want to navigate into the Layout styling section of your creative studio and choose the \u201cBlock\u201d option from the \u201cDisplay\u201d dropdown to make your links stack on top of each other instead of rendering next to each other.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once you’re all done, you will be able to see your dropdown nav in action by previewing the page and hovering over the tab.<\/p>\n\n\n\n

\n\n\n\n

If you have any questions, please contact us on help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Reveal component is used to show content when someone clicks or hovers over some other piece of content. Often-times, Reveals are used to add interactivity in the middle of the page but can […]<\/p>\n","protected":false},"author":9,"featured_media":5459,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1420,32],"tags":[2131],"class_list":["post-2428","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creative-studio","category-the-creative-studio","tag-creative-studio"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2428"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2428\/revisions"}],"predecessor-version":[{"id":7229,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2428\/revisions\/7229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5459"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}