Move Chevron in Fluent UI Nav to Right Side

Question

In any of the Nav examples at https://developer.microsoft.com/en-us/fluentui#/controls/web/nav how would I go about moving the Chevron from the left side to the right side?

Answer 1

It's simple with styles property of Nav Component:

<Nav
  ...
  styles={{
    chevronButton: {
      right: 0,
      left: 'none',
    }
  }}
/>

Codepen working example.