Kuika's Collapse element allows you to present content in a more compact and organized way. Users can show or hide content by clicking on the headings. It is ideal for long explanations, FAQs (Frequently Asked Questions), or information blocks that only need to be opened when necessary.

The Collapse element is only supported in web applications.

Use Cases

• Frequently Asked Questions (FAQ) → Questions are closed; answers open when the user clicks.
• Long Descriptions → Only the heading is shown to the user at first glance.
• Step-by-Step Content → The user can expand each step separately.
• Detailed Information → Start with a summary view and open details as needed.

Usage Scenario – Dashboard Navigation

In this scenario, we will create a sidebar menu on the left using the Collapse element. The user will be able to open and close the submenus by clicking on the “Management,” “Connection,” or “Customer” headings.

• The following structure will be created:
  
  • A navy blue menu on the left side, with the “Dashboard” heading at the top and categories (Management, Connection, Customer) below.
  • A dashboard screen with cards and graphs in the middle area.

UI Design Steps

• Go to the UI Design module.
• Create a new page in your project: DashboardPage
• Add a Row element to split the page in two.
  
  • Elements > Layout > Row
• The left side will be the sidebar, and the right side will be the content area.
• Set the Pading of the Column in the left column for the sidebar to 16px.
• Add the sidebar heading (Dashboard).
  
  • Elements > Label
  • Text: “Dashboard”
  • Font Weight: Bold
  • Color: White
  • Margin Bottom: 12px
• Add the Collapse element.

• Elements > Interactive > Collapse
• Create the “Management,” “Connection,” and “Customer” headings in the Collapse Panel Header field. Add the relevant submenus to each heading:

• Management → You can create the following headings by adding a Label element to the Collapse Panel at the bottom:
  
  • Document, Contact, Prospect, Workflow
• Connection → Chat Integration, Marketing, Email Integration
• Customer → Customer List, Transactions

• Enable the Accordion feature.
• From the Collapse features, set Accordion = True
• This way, only one menu remains open at a time.
• Enhance the user experience by adding icons.

• Add ChevronDown or ChevronRight icons to the headings.
• Create the Dashboard content (optional).
  
  • You can add cards or graphic elements to the right column (example: Area Chart, Card, Table).
  • You can use Grid for a 3-2 card structure in 2 rows, as shown in the image.

Using Features in a Scenario Context

• Collapse
  
  • Description: This is where you define the title and content of the panels.
  • Usage: Add menu titles (“Management,” “Connection,” “Customer”) here.
• Destroy Inactive Panel
  
  • Description: Ensures that the user keeps only one panel open.
  • Usage: When a new panel is opened, the others automatically close.
• Accordion
  
  • Description: Keeps panels organized and simple.
  • Usage: Recommended for sidebar menu structures.

When the Scenario is Complete

• Headings (“Dashboard,” “Management,” “Connection,” “Customer”) appear on the left side.
• When the user clicks on a header, the corresponding menu expands.
• If Accordion is active, other menus automatically close.
• The management panel becomes both user-friendly and organized.

Limitations

• Collapse only works in web applications.
• Using too many panels or nested Collapse can affect performance.

Tips & Best Practices

• Use the Accordion feature actively in sidebar menus.
• Choose short, clear, and categorical headings (such as “Management,” “Connection,” ‘Customer’).
• Unnecessary open panels reduce user experience → Simplify with Collapse.
• Add an icon (e.g., “>” or “▼”) to indicate to the user that it is a dropdown menu.