Dear OutSystems Support Team,
I am attempting to create a custom Sidebar menu in my module using the Interaction\Sidebar component from OutSystems UI.
My Goal: My objective is to build a collapsible and expandable Sidebar menu that displays a clean list of links (Icon + Text) designed elegantly for side navigation, similar to the menus found in modern management applications.
Issues Encountered and Current Status: I have tried to use the standard Sidebar, Menu, and Menu Item components, but I am struggling to achieve the desired look or structure:
Layout Conflict: The Sidebar is occupying the full screen height instead of starting below the top Menu/Header. (This often indicates a CSS/Layout issue where the Sidebar is not contained within the main screen's layout structure).
Styling/Structure: The links are displayed as simple buttons or plain text, not in the form of an elegant navigation list with icons.
Collapsible Behavior: I want to display only the icons when the Sidebar is collapsed, and both icons and text when it is expanded.
My Request:
Recommended Pattern: What is the recommended component or pattern within OutSystems UI to build a sidebar with this specific collapsible (Icon-only) and expandable (Icon + Text) behavior, without relying on custom HTML and CSS overrides?
Layout Guidance: How can I correctly implement the Sidebar so it starts immediately below the Top Menu?
Alternatively, is there a more suitable component/template for the Sidebar that supports this design requirement?
I need a sidebar menu that looks like this:
Thank you for your assistance.
Hi @hava sh,
You’re on the right track — what you’re trying to build is best achieved using the Layout Sidebar pattern available in OutSystems UI. This layout is designed for applications that need a collapsible side navigation similar to modern management dashboards.
The best starting point is to use the Layout Sidebar Pattern available in OutSystems UI (under Interface → Patterns → Layouts → Layout Sidebar). This layout is specifically designed for applications that require side navigation with collapsible behavior and top menu integration.
It provides built-in handling for:
Collapsible sidebar (toggle between icon-only and full text modes)
Responsive behavior (auto-collapse on smaller screens)
Seamless integration with a fixed top header
You can customize the sidebar content (menu items, icons, text) using the Menu Item pattern or by defining your own structure with Containers and Links for better control.
Layout Structure Guidance
To ensure the sidebar appears below the top header (and not overlapping or stretching across the full screen):
Use the “Layout_Sidebar” as your screen layout instead of “Layout_TopMenu” or “Layout_Blank.”
Place your sidebar inside the Sidebar placeholder of this layout, and your main content inside the MainContent placeholder.
Avoid nesting additional Layouts or setting absolute heights; OutSystems UI’s layout grid handles alignment automatically.
If you are working with a custom layout, ensure that:
The Sidebar container is placed inside the main layout div (not outside the global structure).
Apply the position: fixed or sticky class only if needed, and avoid applying it globally.
Collapsible Behavior (Icons + Text)
OutSystems UI’s Sidebar layout supports a collapsible mode by default. To implement the icon-only and icon+text toggle:
Use the built-in ToggleSidebar client action (available in the Layout Sidebar block).
Organize your links using the Menu Item pattern — it supports both icon and text properties.
On collapse, the text will automatically hide, keeping only the icons visible.
If more customization is needed, you can also bind a Boolean variable (e.g., IsSidebarCollapsed) to dynamically control visibility of text or spacing through conditional classes.
If you prefer starting from a pre-built structure, try the Canvas App Template in OutSystems UI. It comes with a modern sidebar and header layout that can be customized easily without extra CSS.
Hi @hava sh ,
Have you tried the below forge component:
https://www.outsystems.com/forge/component-overview/21137/sidebar-collapse-layout-o11
https://www.outsystems.com/forge/component-overview/11273/template-collapsesidebar-o11
regards,
Manish Jawla