Caption and Navigation Layouts

Prop Name	Type	Description
captionLayout	"label" "dropdown" "dropdown-months" "dropdown-years"	Choose the layout for the month caption.
navLayout	"around" "after"	Adjust the positioning of the navigation buttons.

Caption Layouts

Use the captionLayout prop to customize the layout of the month caption.

<DayPicker captionLayout="label" /> // Default value: shows the month and year.

Caption Layout	Description
"label"	Displays the month and year as a label. Default value.
"dropdown"	Displays dropdowns for both month and year navigation.
"dropdown-months"	Displays a dropdown only for the month navigation.
"dropdown-years"	Displays a dropdown only for the year navigation.

Caption Dropdown

Prop Name	Type	Description
captionLayout	"dropdown" "dropdown-months" "dropdown-years"	Choose a dropdown layout for the caption.
startMonth	Date	The earliest month available in the dropdown.
endMonth	Date	The latest month available in the dropdown.
reverseYears	boolean	Reverse the order of the years when a years dropdown is shown.

To enable a navigation dropdown, set captionLayout to dropdown, dropdown-months, or dropdown-years.

• When displaying the dropdown for the years, use the reverseYears prop to reverse the order of the years.
• Use the startMonth and endMonth properties to define the start and end dates for the calendar navigation.

Default Range

Without specifying the startMonth and endMonth properties, the dropdown will display the last 100 years.

<DayPicker
  captionLayout="dropdown"
  defaultMonth={new Date(2024, 6)}
  startMonth={new Date(2024, 6)}
  endMonth={new Date(2025, 9)}
/>

View source

Navigation Layouts

Use the navLayout prop to adjust the positioning of the navigation buttons. When omitted, DayPicker defaults to navLayout="after".

Prop Name	Type	Description
navLayout	"around" "after"	Adjust the positioning of the navigation buttons.

Navigation Layout	Description
"around"	Buttons are displayed on either side of the caption.
"after"	Buttons are displayed after the caption, ensuring the tab order matches the visual order.

<DayPicker navLayout="around" />

View source

<DayPicker navLayout="after" />

View source

See Navigation for additional ways to customize the calendar’s navigation.

Disabling the Navigation

To prevent the user from navigating between months, set the disableNavigation prop to true.

Prop Name	Type	Description
disableNavigation	boolean	Disable the navigation between months.

<DayPicker disableNavigation />

View source

Hiding the Navigation

To hide the navigation completely, set the hideNavigation prop to true. This is useful when setting the caption layout to "dropdown".

Prop Name	Type	Description
hideNavigation	boolean	Hide the navigation bar.

<DayPicker hideNavigation captionLayout="dropdown" />

View source