bracketryjs

Visualize a knockout tournament in the browser

How to adjust navigation buttons

(Navigation buttons are those "left" and "right" button that switch rounds back and forth)

navButtonsPosition option allows you to choose between these buttons' positions:

...
const options = {
    navButtonsPosition: 'overMatches'
}
createBracket(data, wrapper, options)

The default one. Stretches the buttons along the left and right edges of the matches area. Width of the matches area is reduced by the width of the buttons. You can adjust the border-color of the gutters using navGutterBorderColor option

Same as 'gutters' but it doesn't consume the width, allowing the matches area expand to the full width. Clickable area of the button in this case is only the small area around the button's icon. You can adjust a vertical position of this icon using navButtonsTopDistance option.

Buttons appear at the very top, pushing the round titles down. You can adjust the color of the top buttons area using navGutterBorderColor option

Buttons are assimilated into the round titles bar.

They are hidden. Makes sense if you want to replace the default buttons with some "external" ones. (Otherwise there will be no way to navigate).

Icons

Use leftNavButtonHTML and rightNavButtonHTML options to get whatever you like instead of default navigation buttons. Note that this HTML must be wrapped in a tag.

...
const options = {
    navButtonsPosition: 'beforeTitles',
    leftNavButtonHTML: '<div style="padding: 5px;">< PREV ROUND</div>',
    rightNavButtonHTML: '<div style="padding: 5px;">NEXT ROUND ></div>',
}
createBracket(data, wrapper, options)

Add a gradient background to buttons in "overTitles" position to make them more distinct from the titles, in case of overlap:

...
const options = {
    navButtonsPosition: 'overTitles',
    leftNavButtonHTML: `LNBHTML`,
    rightNavButtonHTML: `RNBHTML`,
}
createBracket(data, wrapper, options)

...Or just change the color and size of the default navigation buttons by setting navButtonArrowSize and navButtonSvgColor options. You can also add (or reduce) some space around an icon by setting navButtonPadding.

You can replace the built-in buttons with any "external" stuff

There are several methods that allow you to "manually" navigate between rounds. So you can navigate in response to any events on a page. I.e. you can render your own buttons anywhere on a page and use them for navigation instead of (or in addition to) the default bracket's buttons.