Localization and RTL

ApexTree's localization covers the layout direction (for right-to-left languages) and every user-facing string it renders (aria-labels, expand/collapse labels, the search placeholder, breadcrumb label, and match-count text).

RTL layout

Set locale.direction to 'rtl' to mirror the tree horizontally and set dir="rtl" on the container, so node text and the search/breadcrumb chrome flow right-to-left.

const tree = new ApexTree(document.getElementById('chart'), {
  direction: 'top',
  locale: {
    direction: 'rtl',
  },
})
tree.render(data)

direction	Effect
'ltr' (default)	Left-to-right
'rtl'	Tree mirrored horizontally; dir="rtl" on container
'auto'	Defers to the document or element's inherited direction

RTL mirroring is tuned for the vertical growth directions ('top' and 'bottom'), where sibling order reverses.

Note: locale.direction (text/layout LTR-RTL) is distinct from the top-level direction option, which controls the tree's growth direction (top/bottom/left/right).

Overriding UI strings

locale.messages accepts a partial TreeMessages object. Supply any subset; unset keys keep their English defaults.

const tree = new ApexTree(el, {
  enableSearch: true,
  enableBreadcrumb: true,
  locale: {
    messages: {
      searchPlaceholder: 'Rechercher…',
      searchAriaLabel: 'Rechercher dans l’arbre',
      searchMatchCount: (n) => `${n} résultat${n === 1 ? '' : 's'}`,
      expandNodeLabel: 'Développer',
      collapseNodeLabel: 'Réduire',
      breadcrumbAriaLabel: 'Chemin',
      rootAriaLabel: 'Organigramme',
    },
  },
})
tree.render(data)

TreeMessages reference

Key	Type	Default	Description
rootAriaLabel	string	'Organizational chart'	Root SVG aria-label
expandNodeLabel	string	'Expand node'	Expand-button aria-label
collapseNodeLabel	string	'Collapse node'	Collapse-button aria-label
searchPlaceholder	string	'Search nodes…'	Search input placeholder
searchAriaLabel	string	'Search tree nodes'	Search input aria-label
searchMatchCount	(count) => string	'${n} match(es)'	Search match-count text
breadcrumbAriaLabel	string	'Tree path'	Breadcrumb <nav> aria-label
nodeAriaLabel	(ctx) => string	see below	Builds a node's aria-label

nodeAriaLabel context

nodeAriaLabel receives a context object so translators can build a grammatically correct label:

Field	Type	Description
name	string	Resolved node display name
level	number	1-based depth (root = 1)
position	number	1-based position among siblings
total	number	Number of siblings, including this node
state	'collapsed' | 'expanded'	Expand/collapse state; omitted for leaf nodes

locale: {
  messages: {
    nodeAriaLabel: ({ name, level, position, total, state }) => {
      let label = `${name}, niveau ${level}, ${position} sur ${total}`
      if (state) label += `, ${state === 'expanded' ? 'développé' : 'réduit'}`
      return label
    },
  },
}

Changing locale at runtime

The locale option is set at construction. To switch languages after mount, create a fresh instance (or re-run render() after updating options) with the new locale:

function setLocale(messages, direction) {
  tree.destroy()
  tree = new ApexTree(el, { ...baseOptions, locale: { messages, direction } })
  tree.render(data)
}

Accessibility

Localization and accessibility work together: the a11y options enable ARIA semantics and keyboard navigation, while locale.messages translates the labels those features expose. See the Options reference for a11y.enabled and a11y.label.

const tree = new ApexTree(el, {
  a11y: { enabled: true },
  locale: {
    direction: 'rtl',
    messages: { rootAriaLabel: 'المخطط التنظيمي' },
  },
})

React example

import { ApexTreeChart } from 'react-apextree'

const options = {
  direction: 'top' as const,
  enableSearch: true,
  locale: {
    direction: 'rtl' as const,
    messages: {
      searchPlaceholder: 'بحث…',
      rootAriaLabel: 'المخطط التنظيمي',
    },
  },
}

export default function LocalizedTree() {
  return <ApexTreeChart data={data} options={options} />
}