2

I am trying to figure out how to use a collapsible list in Fluent UI react. It is strange that on the Fluent UI website: here all the controls are ordered to the left with collapsibles but the control itself is not listed in the options.

I would just like to have the exact same control as the searchable list on the fluent UI page.

I searched the web and SO but I only found this

But this is for sharepoint framework and it looks a bit overkill for what I want.

Could anybody help me?

g00golplex
  • 397
  • 1
  • 6
  • 17

2 Answers2

0

The collapsible control on the left in Fluent UI site you linked is the Nav

Another option to implement collapsible is to use the GroupedList, refer to the GroupedList example with custom header and footer example

Valu3
  • 374
  • 3
  • 15
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 12 '21 at 10:58
0

On the Fluent UI page they are using a Nav element with some customizations. Looks like they added a search bar to filter the elements in the Nav.

Fluent UI Elements

trailmix
  • 1
  • Please don't post code as images. Code should be pasted as text, and formatted using Markdown. (The toolbar in the Stack Overflow editor can help you with this.) Code within images is harder to read, less accessible, can't be copied, and doesn't show up in relevant searches. Please [edit] your post to include the code as text; this will help you get better responses, and help prevent your answer from getting deleted. – Jeremy Caney Jan 05 '22 at 00:11