Search code examples
javascriptreactjsreact-bootstrapsplit-button

React BootStrap SplitButton

I have a snippet from a ReactComponent as follows:

<SplitButton bsStyle="info" bsSize="large" title="Main List">
    <MenuItem eventKey="1">Delete List</MenuItem>
    <MenuItem eventKey="2">Edit List Name</MenuItem>
</SplitButton>

I want to add a link to the "Main List" button, but currently I am still moving to that link on clicking the dropdown button of the <SplitButton> instead of the "Main List" title.

Where should I put the href tag to follow the link only when clicking the "Main List" button?

Solution

  • Just add the href attribute to your <SplitButton>, like this:

    <SplitButton href="http://google.com" bsStyle="info" bsSize="large" title="Main List" >
  <MenuItem eventKey="1">Delete List</MenuItem>
  <MenuItem eventKey="2">Edit List Name</MenuItem>
</SplitButton>

    Demo

    There's a list of all properties for this particular component, here