Search code examples
javascriptreactjssemantic-ui-react

Can I specify a Divider or Header in Semantic UI React's options array for the dropdown component?


I am working with ReactJS and using SemanticUI for ReactJS to style the front end,

Is it possible to specify a header or divider from within the options array of objects for a dropdown component?

I get the impression from the documentation that this is not supported yet.


Solution

  • I solved this by changing to object in the options array to have more properties (which allow you to customise the content):

            {
                text: "YouGov Filters",
                value: "yougov-header",
                content: <Header content="YouGov Filters" color="teal" size="small" />,
                disabled: true
            },
    

    It's probably not the ideal way to achieve what I want because I have to set disabled to true (I don't want it to be a selectable option) which means it adopts the greyed out 'disabled' style. I tried to counter this by specifying a color for the header which resulted in the disabled style being applied over the teal colour, not perfect but it will do for now.