Semantic UI React Dropdown: Header Options?

Question

Is there a way to get a selection dropdown with header items in options?

I know of course there is this tag:

<Dropdown.Header icon='tags' content='Filter by tag' />

But this requires the whole dropdown to have custom Dropdown Items and does not work with Semantic UI's "selection" keyword that does a lot of dropdown management for me and let me give the options over an object array ("options").

When adding/ declaring my options I would like to be able to define it as a header item. Like this:

{
                key: id,
                value: id,
                text: name,
                content: (
                    <span>
                        {name}
                        <Label circular>{points}</Label>
                    </span>
                ),
                header: true
            }

Is there something like that? I can't find anything in the documentation.

ralph rapiz · Accepted Answer · 2020-07-27 02:17:22Z

1

You can use a Dropdown and manipulate the array like this:

const options = [
    {
        component:
            Dropdown.Menu,
        children:
            <Dropdown.Menu scrolling>
                <Dropdown.Header content='Filter by tag' />
                <Dropdown.Divider />
            </Dropdown.Menu>,
    },
    {
        key: id,
        text: id,
        value: name
    },

]

answered Jul 27, 2020 at 2:17

ralph rapiz

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chafic · Accepted Answer · 2019-02-28 13:41:19Z

0

If you want the look of a selection dropdown coupled with the ability to use <Dropdown.Header />, try replacing selection with className='selection':

<Dropdown className='selection'>
  <Dropdown.Menu>
    <Dropdown.Header content='Header' />
    <Dropdown.Item>{'Item'}</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

answered Feb 28, 2019 at 13:41

Chafic

3624 silver badges11 bronze badges

Collectives™ on Stack Overflow

Semantic UI React Dropdown: Header Options?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related