Oldboy

Moon

The Dark Knight

The Truman Show

Gladiator

The Prestige

Interstellar

Drive

Zootopia

Spirited Away

Gone Girl

Prisoners

Arrival

The Hunt

Logan

Get Out

Inglourious Basterds

Captain Fantastic

Three Billboards Outside Ebbing, Missouri

Children of Men

Black Dynamite

Parasite

Marriage Story

Jojo Rabbit

Inside Out

Monty Python and the Holy Grail

Hereditary

Up

WALL·E

Your Name.

Akira

Knives Out

Fantastic Mr. Fox

Portrait of a Lady on Fire

The Lighthouse

Monsters, Inc.

Django Unchained

Kill Bill: Vol. 2

Kill Bill: Vol. 1

Sound of Metal

The Fly

Minari

Soul

Princess Mononoke

Spider-Man: No Way Home

Dead Poets Society

Oppenheimer

The Substance

Schindler's List

Fight Club

Eternal Sunshine of the Spotless Mind

Into the Wild

Short Term 12

Whiplash

Shutter Island

Black Swan

The Wave

Se7en

The Intouchables

Pan's Labyrinth

Ex Machina

John Wick

Hacksaw Ridge

The Skin I Live In

The Shining

Memento

Blade Runner

Blade Runner 2049

Annihilation

Lady Bird

The Big Sick

Spider-Man: Into the Spider-Verse

Iron Man

Hell or High Water

Love, Simon

Snowpiercer

The Incredibles

Spider-Man: Homecoming

Bacurau

The Girl with the Dragon Tattoo

Coraline

Hunt for the Wilderpeople

Klaus

Coherence

Coco

The Butterfly Effect

The Matrix

Nightcrawler

The Father

The Thing

Everything Everywhere All at Once

Moneyball

Nope

Judas and the Black Messiah

Puss in Boots: The Last Wish

The Notebook

Edit props

Props

Close

---

Wrap Around

Features

• 💪 It works

Usage

TODO

API Reference

Constructor Props

The props that are passed when calling

new SpatialMenu()

new SpatialMenu()

export type SpatialMenuProps<T> = {
  /**
   * The currently highlighted value.
   */
  highlighted?: MaybeGetter<T | null | undefined>;

  /**
   * Called when the highlighted value changes.
   */
  onHighlightChange?: (highlighted: T | null) => void;

  onSelect?: (value: T) => void;

  /**
   * Whether navigation should wrap around when reaching the edges.
   * @default false
   */
  wrap?: MaybeGetter<boolean>;

  /**
   * Scroll behavior when highlighting an item with the keyboard.
   * `null` to disable scrolling.
   *
   * @default "smooth"
   */
  scrollBehavior?: MaybeGetter<"smooth" | "instant" | "auto" | null>;

  /**
   * The maximum distance a the centerX of an item can be in relation
   * to the highlighted item when navigating vertically with the keyboard.
   *
   * Set to `null` to disable.
   *
   * @default null
   */
  maxDistanceX?: MaybeGetter<number | null>;

  /**
   * The maximum distance a the centerY of an item can be in relation
   * to the highlighted item when navigating horizontally with the keyboard.
   *
   * Set to `null` to disable.
   *
   * @default 16
   */
  maxDistanceY?: MaybeGetter<number | null>;
};

export type SpatialMenuProps<T> = {
  /**
   * The currently highlighted value.
   */
  highlighted?: MaybeGetter<T | null | undefined>;

  /**
   * Called when the highlighted value changes.
   */
  onHighlightChange?: (highlighted: T | null) => void;

  onSelect?: (value: T) => void;

  /**
   * Whether navigation should wrap around when reaching the edges.
   * @default false
   */
  wrap?: MaybeGetter<boolean>;

  /**
   * Scroll behavior when highlighting an item with the keyboard.
   * `null` to disable scrolling.
   *
   * @default "smooth"
   */
  scrollBehavior?: MaybeGetter<"smooth" | "instant" | "auto" | null>;

  /**
   * The maximum distance a the centerX of an item can be in relation
   * to the highlighted item when navigating vertically with the keyboard.
   *
   * Set to `null` to disable.
   *
   * @default null
   */
  maxDistanceX?: MaybeGetter<number | null>;

  /**
   * The maximum distance a the centerY of an item can be in relation
   * to the highlighted item when navigating horizontally with the keyboard.
   *
   * Set to `null` to disable.
   *
   * @default 16
   */
  maxDistanceY?: MaybeGetter<number | null>;
};

Methods

The methods returned from

new SpatialMenu()

new SpatialMenu()

• getItem

  (
    value: T,
    options?: Pick<SpatialMenuItemProps<T>, "onSelect"> | undefined,
  ) => SpatialMenuItem<T>

  (
    value: T,
    options?: Pick<SpatialMenuItemProps<T>, "onSelect"> | undefined,
  ) => SpatialMenuItem<T>

Properties

The properties returned from

new SpatialMenu()

new SpatialMenu()

• onSelect

  ((value: T) => void) | undefined

  ((value: T) => void) | undefined
• wrap

  boolean

  boolean
• scrollBehavior

  "auto" | "smooth" | "instant" | null

  "auto" | "smooth" | "instant" | null
• maxDistanceX

  number | null

  number | null
• maxDistanceY

  number | null

  number | null
• selectionMode

  "keyboard" | "mouse"

  "keyboard" | "mouse"
• highlighted

  T | null

  T | null
• root

  {
    readonly [x: symbol]: (node: HTMLElement) => () => void
    readonly "data-melt-spatial-menu-root": ""
    readonly tabindex: 0
    readonly onkeydown: (e: KeyboardEvent) => void
  }

  {
    readonly [x: symbol]: (node: HTMLElement) => () => void
    readonly "data-melt-spatial-menu-root": ""
    readonly tabindex: 0
    readonly onkeydown: (e: KeyboardEvent) => void
  }

  The root element.
• input

  {
    readonly [x: symbol]: (node: HTMLInputElement) => () => void
    readonly "data-melt-spatial-menu-input": ""
    readonly onkeydown: (e: KeyboardEvent) => void
  }

  {
    readonly [x: symbol]: (node: HTMLInputElement) => () => void
    readonly "data-melt-spatial-menu-input": ""
    readonly onkeydown: (e: KeyboardEvent) => void
  }