Table of Contents

The Table of Contents widget is a powerful tool for improving user navigation on your content-rich pages. Utilize the Content tab of this widget to structure and customize your table of contents in JupiterX effectively.

Content Tab

Table of Contents

Start by laying down the essential properties:

  • Title: Name your table of contents for clarity and visibility at the top of the list.
  • HTML Tag: Ensure to use an appropriate HTML tag for the title to maintain SEO best practices and adhere to your site's styling rules.

Determine which headings are included in your table of contents:

  • Include/Exclude: Opt to explicitly include or exclude certain heading types depending on your content's architecture.
  • Anchors By Tags: Here, you need to specify which heading tags (e.g., H2, H3, H4) should have corresponding entries in the table. Add or remove tags as necessary to match the structure of your content.
  • Container: Target a specific section of your content by entering a CSS selector, making your table of contents exclusive to a particular content area.

Personalize the display of your table of contents entries:

  • Marker View: Decide how you would like the list items to be marked—choices may include numbers, bullets, or none for a cleaner look.

Additional Options

Refine the functionality and user interface of your table of contents:

  • Word Wrap: Control long titles either by allowing them to span multiple lines or by truncating them to keep your table concise.
  • Minimize Box: Offer a collapsed version of the table of contents to save real estate and focus on content.
  • Icon: Set the visual cue for expanding the table of contents with an appropriate icon.
  • Minimize Icon: Similarly, select an icon that symbolizes the ability to collapse the table of contents for a tidy page layout.
  • Minimized On: Determine at which screen sizes the table of contents should default to its minimized form, optimizing for mobile view.
  • Hierarchical View: Enable a tiered structure to reflect the hierarchy of your content headings, aiding in comprehension of the content structure.
  • Collapse Subitems: This option is particularly useful if your table of contents is sticky; it allows for a simplified view where users can expand sections as needed.

Style Tab

Box

The container of your table of contents is the first impression—make it count:

  • Background Color: Opt for a color that sets apart the table of contents but still fits within your color scheme.
  • Border Color & Width: Choose and size a border that adds definition to the box without overwhelming it.
  • Border Radius: Adjust corner roundness for a sharp or soft-edged look.
  • Min Height: Establish a base height for uniformity across different pages.
  • Box Shadow: A subtle shadow can help your table lift off the page, making it a focal point.
  • Padding: Pad the interior to ensure contents have room to breathe, enhancing readability.

Header

Design a header that captures attention and sets the tone:

  • Background Color: Distinguish the header with a unique background color.
  • Text Color: Select a text color that contrasts well with the header's background for clear visibility.
  • Typography: Fine-tune font attributes to match your website's branding.
  • Icon Color: Sync your icons with the text or header background for cohesive design.
  • Separator Width: Decide the prominence of the line that divides the header from the contents below.
  • Padding: Buffer the header text from the edges based on the content's needs.

List

Carefully style the core components of your table of contents:

  • Padding: Ensure that each entry is spaced out for easy selection, particularly on mobile devices.
  • Max Height: If your list is extensive, consider capping its height to maintain page aesthetics.
  • Typography: Legibility is key, so select a font that's easy to read but also aesthetically pleasing.
  • Indent: Create a visual hierarchy easily understood at a glance by adjusting the indent.
  • Text Color: Use color to guide visitors intuitively through the Normal, Hover, and Active states.
  • Underline: This option can enhance readability or add style depending on your theme.
  • Marker: For bullet-style lists, control the appearance of the marker to complement your text.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.