How to enhance navigation and page layout with expanders

[#1]

Here is the scenario: You want to organize your content into small, specific sections to make navigation easier for your readers, give them more control, and make efficient use of space. What would you use? Layouts, tabs, and panels can be considered for such scenarios. But if you really think about it, expanders are what you need.

If you've been following my posts (I’m flattered if you are), you know the formula. We'll begin by highlighting the importance of expanders, explore the native expand macro in Confluence, and finish with a few tips and best practices for working with expanders.

The importance of expands in Confluence

• Facilitate navigation

Navigation is the first thing to keep in mind when creating your Confluence page. Regardless of how good the content is, if it is challenging to navigate through, rest assured nobody is going to bother reading it. Expanders are specifically designed to facilitate navigation, streamline your page layout and give your users control over the section they want to read. Expanders can be collapsed or expanded making it less challenging to scan and explore the page content.

• Make use of space

The illusion (and temptation) of space. When working on (especially) blank Confluence pages, we kind of have the impression that the space is endless. In truth we do have space, but does it mean we have to use it all? Absolutely not for obvious reasons: navigation, readability, accessibility and more. And this is why we tend to use a host of macros to help us make use of space in a smart way: tabs, layouts, and… of course, expanders. 

Expanders help organize your pages by hiding supplementary or unnecessary details, resulting in a cleaner and more organized layout. This is especially beneficial for long content such as documentation, knowledge base articles and more.

• Break down content into sections

Nobody wants to endlessly scroll through a Confluence page to find what they are looking for. More often than not, a Confluence page can target a bunch of people from different departments. And that’s why content should be broken down into specific sections to save your users time and facilitate complex processes like employee onboarding. Expanders are perfect for this. They help you organize topics into more manageable segments. Your readers can immediately locate what they are looking for,  approach the content step-by-step, expanding sections as needed. This obviously improves engagement,  comprehension, and of course, saves time.

Is there a problem with Confluence native Expand?

Think of those athletes who seemed destined for greatness but never quite reached their true potential (though they are still quite good). That's the Confluence Expand macro in a nutshell. There's nothing wrong with it—I quite like and use it—but it could do more.

Confluence native expands are easy to insert within your content. Type /Expand, include a descriptive title and content within the macro’s body. 

 

Additionally, they can blend in with the rest of your content be it within layouts, tables, simple text, and more. 

Any drawbacks then? Although simple to use, Confluence expands come with no customization options to personalize your sections. 

Ho to get the most out of expanders

• Use descriptive titles: Expanders are often collapsed with only the title providing you with an idea about the hidden content.  This is why you have to use clear and concise titles. For example, instead of a generic title like "Details" or “More” use something more descriptive like "Project Requirements" or "Step-by-Step Instructions." This helps users quickly understand what information is contained within each expander.

• Know which content to include: One of the main issues when working with expanders is that users tend to use them for their main content. Don’t do that. Use expanders for additional or detailed information that supports the main content, not for essential information. For instance, in a project overview page, the main content could include a summary and objectives, while the expanders provide detailed timelines, resource lists, or background information.

• Maintain a consistent style: Maintain a consistent style and structure for all expanders on a page to avoid confusing your readers. If using bold text for titles, ensure all expander titles are bold. Same applies for color, icons, and layout. Consistency helps your users know what to expect and easily navigate through the content. With our latest release of Content Formatting Toolkit Cloud, you have complete control over the layout and design of your expanders. 

You can choose to display your expanders in either a list or grid format to optimize space and create a cohesive layout. In terms of look & feel, you can personalize headers, select colors and icons for your expanders to perfectly match your branding style.

• Balance usage: As is the case with any macro, try to use them responsibly. Avoid overusing expanders as it can lead to excessive clicking, confusion, and an overall bad experience. As mentioned above, limit the usage for specific additional info, and rely on other macros such tabs or panels for other content.

• Know When to Use Expanders or Tabs: Expanders are best for content that needs to be read in a linear fashion or for additional information that supports the main content. For example, on a tutorial page, expanders can be used for additional explanations or optional steps that users can view as needed. On the other hand, tabs are ideal for organizing content that can be grouped into specific categories or sections that users might want to switch between quickly. For example, in a product comparison page, tabs can be used to separate different product categories, allowing users to easily switch between them without scrolling.

And there you have it Expanders are best suited to help you facilitate navigation, make use of space, and increase engagement. The beautiful expanders used in this post are made with Content Formatting Toolkit Cloud by Vectors. If you like what you see, then make sure to give our app a try here.

[Kristian Klima]

Great post @Fares Laroui_Vectors_ 

Another use case - dealing with multiple code syntax options :) 

I came up with this workaround when migrating open source router docs from a git-based solution to Confluence. 

[Hamza Ali]

To organize content efficiently and enhance navigation, use expanders. They help keep sections tidy and give readers control over what they view. Utilize the expand macro in Confluence to create expandable sections. This method improves user experience by making information manageable and engaging. this is how i fixed for inasaldiningprices , micro blog for mang inasal old menuin philippines.

[Hamza Ali]

To organize content efficiently and enhance navigation, use expanders. They help keep sections tidy and give readers control over what they view. Utilize the expand macro in Confluence to create expandable sections. This method improves user experience by making information manageable and engaging. this is how i fixed for inasaldiningprices , micro blog for mang inasal old menu in philippines.