Navigation, overlays and interactive blocks
How to use accordion, tabs, slider, overlay, dropdown, table of contents and other interactive blocks.
Updated November 10, 2026
Add blocks that respond to visitors: panels that open, slides that move, and popups. Add them from Insert, then Elements, and change them on the Content tab.
Accordion
Stacked sections that open and close. Add Accordion Item blocks inside it. Accordions can be nested inside each other.
Accordion: Allow multiple open and Chevron icon (chevron, plus and minus, arrow, caret, a custom icon or none).
Accordion Item: Title, Open by default and Open on the current page, which opens the item that holds the link to the page being viewed.
Tabs
Add a Tab for each panel and set its Tab label. Use Default active tab on Tabs to choose which one shows first.
Slider
Add a Slide for each item.
Transition: Slide, Fade or Peek / Strip, with Speed and Easing.
Loop, Autoplay, Interval and Pause on hover.
Auto-scroll (marquee) with Scroll speed for continuous movement.
Show arrows and Show dots.
To fill a slider from the CMS or your products, use Collection Slider. See Collections and dynamic pages.
Overlay
A popup or modal over the whole page.
Add an Overlay block and build its content in the overlay editor. Click Done to return to the page.
Select the block that should open it, such as a button, and in Content set Opens overlay.
Under Open on, choose Click, Hover or Focus.
On the Overlay itself you can set Click backdrop to close, Close on Escape, Page scroll, a Keyboard shortcut to open it and Focus the first field on open.
Dropdown
A panel attached to the block that opens it, such as a navigation menu.
Open on: Click, Hover or Focus.
Click outside to close and Close on Escape.
Side, Align, Offset X and Offset Y to position it.
Collision strategy: what the panel does when it would leave the screen.
Table of contents
Table of contents builds a list of links from a Rich Text block on the page. Choose the Rich text block and the Headings to list (H2 only or H2 and H3). Turn on Highlight the section in view to show visitors where they are.
More interactive blocks
Stepper: steps a visitor moves through, with Free, Linear or Read-only navigation.
Marquee: items that scroll continuously.
Countdown: time left until a Target date.
Counter: a number that counts up.
Progress Bar: a value from 0 to 100.
Flip Box: a card with a front and a back.
Back to Top: a button that appears after a scroll distance you set.
Locale Switcher: lets visitors pick a language. See Languages.
Breadcrumb: the path to the current page.
Page Preloader: a loading screen. Choose to show it on every visit or the first visit only.
Calendar: pick a single date, a range or multiple dates.
Selector: lets a visitor choose from a set of options.
Star Rating: a rating shown in stars.
Related
Questions about building on PraismaHub? We're happy to help.
Contact us
