navigation.html

<a class="center-align switch" style="display:block;margin-bottom: 1em" name="beginner-mode" title="Hide the sections concerning advanced usage to navigate more easily in the documentation">
  <label>
    <input type="checkbox" name="beginner-mode-trigger" id="beginner-mode-trigger" />
    <span class="lever"></span>
    Beginner Mode
  </label>
</a>

<li><a class="nav-link external" href="https://github.com/marmelab/react-admin/releases" target="_blank">What's new?</a></li>

<ul><div>Getting Started</div>
  <li {% if page.path == 'Tutorial.md' %} class="active beginner" {% else %} class="beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Tutorial.html">Tutorial</a></li>
  <li {% if page.path == 'CreateReactAdmin.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./CreateReactAdmin.html">Create React Admin</a></li>
  <li {% if page.path == 'Vite.md' %} class="active" {% endif %}><a class="nav-link" href="./Vite.html">Vite</a></li>
  <li {% if page.path == 'NextJs.md' %} class="active" {% endif %}><a class="nav-link" href="./NextJs.html">Next.js</a></li>
  <li {% if page.path == 'Remix.md' %} class="active" {% endif %}><a class="nav-link" href="./Remix.html">Remix</a></li>
  <li {% if page.path == 'ReactRouterFramework.md' %} class="active" {% endif %}><a class="nav-link" href="./ReactRouterFramework.html">React Router Framework</a></li>
  <li {% if page.path == 'Deploy.md' %} class="active beginner" {% endif %}><a class="nav-link" href="./Deploy.html">Deployment</a></li>
  <li {% if page.path == 'TanStackStart.md' %} class="active" {% endif %}><a class="nav-link" href="./TanStackStart.html">TanStack Start</a></li>
</ul>

<ul><div>Guides & Concepts</div>
  <li {% if page.path == 'Architecture.md' %} class="active" {% endif %}><a class="nav-link" href="./Architecture.html">General Concepts</a></li>
  <li {% if page.path == 'DataFetchingGuide.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./DataFetchingGuide.html">Data Fetching</a></li>
  <li {% if page.path == 'CRUD.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./CRUD.html">CRUD Pages</a></li>
  <li {% if page.path == 'Forms.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Forms.html">Forms</a></li>
  <li {% if page.path == 'SecurityGuide.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SecurityGuide.html">Security</a></li>
  <li {% if page.path == 'Routing.md' %} class="active" {% endif %}><a class="nav-link" href="./Routing.html">Routing</a></li>
  <li {% if page.path == 'Realtime.md' %} class="active" {% endif %}><a class="nav-link" href="./Realtime.html">Realtime</a></li>
  <li {% if page.path == 'Theming.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Theming.html">Theming</a></li>
  <li {% if page.path == 'Translation.md' %} class="active" {% endif %}><a class="nav-link" href="./Translation.html">I18N</a></li>
  <li {% if page.path == 'Store.md' %} class="active" {% endif %}><a class="nav-link" href="./Store.html">Preferences</a></li>
  <li {% if page.path == 'Features.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Features.html">All Features</a></li>
  <li {% if page.path == 'Upgrade.md' %} class="active" {% endif %}><a class="nav-link" href="./Upgrade.html">Upgrading to v5</a></li>
  <li {% if page.path == 'Community.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Community.html">Community</a></li>
  </ul>

  <ul><div>App Configuration</div>
    <li {% if page.path == 'Admin.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Admin.html"><code>&lt;Admin&gt;</code></a></li>
    <li {% if page.path == 'Resource.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Resource.html"><code>&lt;Resource&gt;</code></a></li>
    <li {% if page.path == 'CustomRoutes.md' %} class="active" {% endif %}><a class="nav-link" href="./CustomRoutes.html"><code>&lt;CustomRoutes&gt;</code></a></li>
  </ul>

  <ul><div>Data Fetching</div>
    <li {% if page.path == 'DataProviders.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./DataProviders.html">Data Provider Setup</a></li>
    <li {% if page.path == 'Actions.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Actions.html">Querying the API</a></li>
    <li {% if page.path == 'DataProviderList.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./DataProviderList.html">Supported backends</a></li>
    <li {% if page.path == 'DataProviderWriting.md' %} class="active" {% endif %}><a class="nav-link" href="./DataProviderWriting.html">Writing A Data Provider</a></li>
    <li {% if page.path == 'useDataProvider.md' %} class="active" {% endif %}><a class="nav-link" href="./useDataProvider.html"><code>useDataProvider</code></a></li>
    <li {% if page.path == 'useGetList.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetList.html"><code>useGetList</code></a></li>
    <li {% if page.path == 'useInfiniteGetList.md' %} class="active" {% endif %}><a class="nav-link" href="./useInfiniteGetList.html"><code>useInfiniteGetList</code></a></li>
    <li {% if page.path == 'useGetOne.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetOne.html"><code>useGetOne</code></a></li>
    <li {% if page.path == 'useGetMany.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetMany.html"><code>useGetMany</code></a></li>
    <li {% if page.path == 'useGetManyReference.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetManyReference.html"><code>useGetManyReference</code></a></li>
    <li {% if page.path == 'useCreate.md' %} class="active" {% endif %}><a class="nav-link" href="./useCreate.html"><code>useCreate</code></a></li>
    <li {% if page.path == 'useUpdate.md' %} class="active" {% endif %}><a class="nav-link" href="./useUpdate.html"><code>useUpdate</code></a></li>
    <li {% if page.path == 'useUpdateMany.md' %} class="active" {% endif %}><a class="nav-link" href="./useUpdateMany.html"><code>useUpdateMany</code></a></li>
    <li {% if page.path == 'useDelete.md' %} class="active" {% endif %}><a class="nav-link" href="./useDelete.html"><code>useDelete</code></a></li>
    <li {% if page.path == 'useDeleteMany.md' %} class="active" {% endif %}><a class="nav-link" href="./useDeleteMany.html"><code>useDeleteMany</code></a></li>
    <li {% if page.path == 'useGetTree.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetTree.html"><code>useGetTree</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'withLifecycleCallbacks.md' %} class="active" {% endif %}><a class="nav-link" href="./withLifecycleCallbacks.html"><code>withLifecycleCallbacks</code></a></li>
    <li {% if page.path == 'fetchJson.md' %} class="active" {% endif %}><a class="nav-link" href="./fetchJson.html"><code>fetchJson</code></a></li>
  </ul>

  <ul><div>Security</div>
    <li {% if page.path == 'Authentication.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Authentication.html">Auth Provider Setup</a></li>
    <li {% if page.path == 'AuthProviderList.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./AuthProviderList.html">Supported backends</a></li>
    <li {% if page.path == 'AuthProviderWriting.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./AuthProviderWriting.html">Writing An Auth Provider</a></li>
    <li {% if page.path == 'Permissions.md' %} class="active" {% endif %}><a class="nav-link" href="./Permissions.html">Authorization</a></li>
    <li {% if page.path == 'AuthRBAC.md' %} class="active" {% endif %}><a class="nav-link" href="./AuthRBAC.html">RBAC<img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'Authenticated.md' %} class="active" {% endif %}><a class="nav-link" href="./Authenticated.html"><code>&lt;Authenticated&gt;</code></a></li>
    <li {% if page.path == 'CanAccess.md' %} class="active" {% endif %}><a class="nav-link" href="./CanAccess.html"><code>&lt;CanAccess&gt;</code></a></li>
    <li {% if page.path == 'useAuthenticated.md' %} class="active" {% endif %}><a class="nav-link" href="./useAuthenticated.html"><code>useAuthenticated</code></a></li>
    <li {% if page.path == 'useAuthState.md' %} class="active" {% endif %}><a class="nav-link" href="./useAuthState.html"><code>useAuthState</code></a></li>
    <li {% if page.path == 'useLogin.md' %} class="active" {% endif %}><a class="nav-link" href="./useLogin.html"><code>useLogin</code></a></li>
    <li {% if page.path == 'useLogout.md' %} class="active" {% endif %}><a class="nav-link" href="./useLogout.html"><code>useLogout</code></a></li>
    <li {% if page.path == 'useGetIdentity.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetIdentity.html"><code>useGetIdentity</code></a></li>
    <li {% if page.path == 'useCanAccess.md' %} class="active" {% endif %}><a class="nav-link" href="./useCanAccess.html"><code>useCanAccess</code></a></li>
    <li {% if page.path == 'usePermissions.md' %} class="active" {% endif %}><a class="nav-link" href="./usePermissions.html"><code>usePermissions</code></a></li>
    <li {% if page.path == 'useAuthProvider.md' %} class="active" {% endif %}><a class="nav-link" href="./useAuthProvider.html"><code>useAuthProvider</code></a></li>
    <li {% if page.path == 'addRefreshAuthToAuthProvider.md' %} class="active" {% endif %}><a class="nav-link" href="./addRefreshAuthToAuthProvider.html"><code>addRefreshAuthToAuthProvider</code></a></li>
    <li {% if page.path == 'addRefreshAuthToDataProvider.md' %} class="active" {% endif %}><a class="nav-link" href="./addRefreshAuthToDataProvider.html"><code>addRefreshAuthToDataProvider</code></a></li>
  </ul>

  <ul><div>List Page</div>
    <li {% if page.path == 'ListTutorial.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ListTutorial.html">Introduction</a></li>
    <li {% if page.path == 'FilteringTutorial.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./FilteringTutorial.html">Filtering The List</a></li>
    <li {% if page.path == 'List.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./List.html"><code>&lt;List&gt;</code></a></li>
    <li {% if page.path == 'ListBase.md' %} class="active" {% endif %}><a class="nav-link" href="./ListBase.html"><code>&lt;ListBase&gt;</code></a></li>
    <li {% if page.path == 'ListGuesser.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ListGuesser.html"><code>&lt;ListGuesser&gt;</code></a></li>
    <li {% if page.path == 'InfiniteList.md' %} class="active" {% endif %}><a class="nav-link" href="./InfiniteList.html"><code>&lt;InfiniteList&gt;</code></a></li>
    <li {% if page.path == 'Tree.md' %} class="active" {% endif %}><a class="nav-link" href="./Tree.html"><code>&lt;Tree&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'TreeWithDetails.md' %} class="active" {% endif %}><a class="nav-link" href="./TreeWithDetails.html"><code>&lt;TreeWithDetails&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'DataTable.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./DataTable.html"><code>&lt;DataTable&gt;</code></a></li>
    <li {% if page.path == 'Datagrid.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Datagrid.html"><code>&lt;Datagrid&gt;</code></a></li>
    <li {% if page.path == 'DatagridAG.md' %} class="active" {% endif %}><a class="nav-link" href="./DatagridAG.html"><code>&lt;DatagridAG&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'SimpleList.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SimpleList.html"><code>&lt;SimpleList&gt;</code></a></li>
    <li {% if page.path == 'SingleFieldList.md' %} class="active" {% endif %}><a class="nav-link" href="./SingleFieldList.html"><code>&lt;SingleFieldList&gt;</code></a></li>
    <li {% if page.path == 'EditableDatagrid.md' %} class="active" {% endif %}><a class="nav-link" href="./EditableDatagrid.html"><code>&lt;EditableDatagrid&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'Calendar.md' %} class="active" {% endif %}><a class="nav-link" href="./Calendar.html"><code>&lt;Calendar&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'Scheduler.md' %} class="active" {% endif %}><a class="nav-link" href="./Scheduler.html"><code>&lt;Scheduler&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'FilterButton.md' %} class="active" {% endif %}><a class="nav-link" href="./FilterButton.html"><code>&lt;FilterButton&gt;</code></a></li>
    <li {% if page.path == 'FilterList.md' %} class="active" {% endif %}><a class="nav-link" href="./FilterList.html"><code>&lt;FilterList&gt;</code></a></li>
    <li {% if page.path == 'FilterLiveForm.md' %} class="active" {% endif %}><a class="nav-link" href="./FilterLiveForm.html"><code>&lt;FilterLiveForm&gt;</code></a></li>
    <li {% if page.path == 'FilterLiveSearch.md' %} class="active" {% endif %}><a class="nav-link" href="./FilterLiveSearch.html"><code>&lt;FilterLiveSearch&gt;</code></a></li>
    <li {% if page.path == 'FilterValue.md' %} class="active" {% endif %}><a class="nav-link" href="./FilterValue.html"><code>&lt;FilterValue&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'RecordsIterator.md' %} class="active" {% endif %}><a class="nav-link" href="./RecordsIterator.html"><code>&lt;RecordsIterator&gt;</code></a></li>
    <li {% if page.path == 'SavedQueriesList.md' %} class="active" {% endif %}><a class="nav-link" href="./SavedQueriesList.html"><code>&lt;SavedQueriesList&gt;</code></a></li>
    <li {% if page.path == 'StackedFilters.md' %} class="active" {% endif %}><a class="nav-link" href="./StackedFilters.html"><code>&lt;StackedFilters&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'Pagination.md' %} class="active" {% endif %}><a class="nav-link" href="./Pagination.html"><code>&lt;Pagination&gt;</code></a></li>
    <li {% if page.path == 'SortButton.md' %} class="active" {% endif %}><a class="nav-link" href="./SortButton.html"><code>&lt;SortButton&gt;</code></a></li>
    <li {% if page.path == 'SelectColumnsButton.md' %} class="active" {% endif %}><a class="nav-link" href="./SelectColumnsButton.html"><code>&lt;SelectColumnsButton&gt;</code></a></li>
    <li {% if page.path == 'Count.md' %} class="active" {% endif %}><a class="nav-link" href="./Count.html"><code>&lt;Count&gt;</code></a></li>
    <li {% if page.path == 'WithListContext.md' %} class="active" {% endif %}><a class="nav-link" href="./WithListContext.html"><code>&lt;WithListContext&gt;</code></a></li>
    <li {% if page.path == 'useListContext.md' %} class="active" {% endif %}><a class="nav-link" href="./useListContext.html"><code>useListContext</code></a></li>
    <li {% if page.path == 'useList.md' %} class="active" {% endif %}><a class="nav-link" href="./useList.html"><code>useList</code></a></li>
    <li {% if page.path == 'useListController.md' %} class="active" {% endif %}><a class="nav-link" href="./useListController.html"><code>useListController</code></a></li>
    <li {% if page.path == 'useUnselect.md' %} class="active" {% endif %}><a class="nav-link" href="./useUnselect.html"><code>useUnselect</code></a></li>
    <li {% if page.path == 'useUnselectAll.md' %} class="active" {% endif %}><a class="nav-link" href="./useUnselectAll.html"><code>useUnselectAll</code></a></li>
  </ul>

  <ul><div>Creation & Edition Pages</div>
    <li {% if page.path == 'EditTutorial.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./EditTutorial.html">Introduction</a></li>
    <li {% if page.path == 'Validation.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Validation.html">Form Validation</a></li>
    <li {% if page.path == 'Create.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Create.html"><code>&lt;Create&gt;</code></a></li>
    <li {% if page.path == 'CreateBase.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateBase.html"><code>&lt;CreateBase&gt;</code></a></li>
    <li {% if page.path == 'Edit.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Edit.html"><code>&lt;Edit&gt;</code></a></li>
    <li {% if page.path == 'EditBase.md' %} class="active" {% endif %}><a class="nav-link" href="./EditBase.html"><code>&lt;EditBase&gt;</code></a></li>
    <li {% if page.path == 'EditGuesser.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./EditGuesser.html"><code>&lt;EditGuesser&gt;</code></a></li>
    <li {% if page.path == 'SimpleForm.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SimpleForm.html"><code>&lt;SimpleForm&gt;</code></a></li>
    <li {% if page.path == 'TabbedForm.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./TabbedForm.html"><code>&lt;TabbedForm&gt;</code></a></li>
    <li {% if page.path == 'Form.md' %} class="active" {% endif %}><a class="nav-link" href="./Form.html"><code>&lt;Form&gt;</code></a></li>
    <li {% if page.path == 'LongForm.md' %} class="active" {% endif %}><a class="nav-link" href="./LongForm.html"><code>&lt;LongForm&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'AccordionForm.md' %} class="active" {% endif %}><a class="nav-link" href="./AccordionForm.html"><code>&lt;AccordionForm&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'WizardForm.md' %} class="active" {% endif %}><a class="nav-link" href="./WizardForm.html"><code>&lt;WizardForm&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'EditDialog.md' %} class="active" {% endif %}><a class="nav-link" href="./EditDialog.html"><code>&lt;EditDialog&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'EditInDialogButton.md' %} class="active" {% endif %}><a class="nav-link" href="./EditInDialogButton.html"><code>&lt;EditInDialogButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'CreateDialog.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateDialog.html"><code>&lt;CreateDialog&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'CreateInDialogButton.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateInDialogButton.html"><code>&lt;CreateInDialogButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'JsonSchemaForm.md' %} class="active" {% endif %}><a class="nav-link" href="./JsonSchemaForm.html"><code>&lt;JsonSchemaForm&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'Toolbar.md' %} class="active" {% endif %}><a class="nav-link" href="./Toolbar.html"><code>&lt;Toolbar&gt;</code></a></li>
    <li {% if page.path == 'SaveButton.md' %} class="active" {% endif %}><a class="nav-link" href="./SaveButton.html"><code>&lt;SaveButton&gt;</code></a></li>
    <li {% if page.path == 'AutoPersistInStore.md' %} class="active" {% endif %}><a class="nav-link" href="./AutoPersistInStore.html"><code>&lt;AutoPersistInStore&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'AutoSave.md' %} class="active" {% endif %}><a class="nav-link" href="./AutoSave.html"><code>&lt;AutoSave&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'FormFillerButton.md' %} class="active" {% endif %}><a class="nav-link" href="./FormFillerButton.html"><code>&lt;FormFillerButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useCreateContext.md' %} class="active" {% endif %}><a class="nav-link" href="./useCreateContext.html"><code>useCreateContext</code></a></li>
    <li {% if page.path == 'useCreateController.md' %} class="active" {% endif %}><a class="nav-link" href="./useCreateController.html"><code>useCreateController</code></a></li>
    <li {% if page.path == 'useEditContext.md' %} class="active" {% endif %}><a class="nav-link" href="./useEditContext.html"><code>useEditContext</code></a></li>
    <li {% if page.path == 'useEditController.md' %} class="active" {% endif %}><a class="nav-link" href="./useEditController.html"><code>useEditController</code></a></li>
    <li {% if page.path == 'useSaveContext.md' %} class="active" {% endif %}><a class="nav-link" href="./useSaveContext.html"><code>useSaveContext</code></a></li>
    <li {% if page.path == 'useRecordFromLocation.md' %} class="active" {% endif %}><a class="nav-link" href="./useRecordFromLocation.html"><code>useRecordFromLocation</code></a></li>
    <li {% if page.path == 'useRegisterMutationMiddleware.md' %} class="active" {% endif %}><a class="nav-link" href="./useRegisterMutationMiddleware.html"><code>useRegisterMutationMiddleware</code></a></li>
    <li {% if page.path == 'useUnique.md' %} class="active" {% endif %}><a class="nav-link" href="./useUnique.html"><code>useUnique</code></a></li>
  </ul>

  <ul><div>Show Page</div>
    <li {% if page.path == 'ShowTutorial.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ShowTutorial.html">Introduction</a></li>
    <li {% if page.path == 'Show.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Show.html"><code>&lt;Show&gt;</code></a></li>
    <li {% if page.path == 'ShowBase.md' %} class="active" {% endif %}><a class="nav-link" href="./ShowBase.html"><code>&lt;ShowBase&gt;</code></a></li>
    <li {% if page.path == 'ShowGuesser.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ShowGuesser.html"><code>&lt;ShowGuesser&gt;</code></a></li>
    <li {% if page.path == 'SimpleShowLayout.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SimpleShowLayout.html"><code>&lt;SimpleShowLayout&gt;</code></a></li>
    <li {% if page.path == 'TabbedShowLayout.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./TabbedShowLayout.html"><code>&lt;TabbedShowLayout&gt;</code></a></li>
    <li {% if page.path == 'Labeled.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Labeled.html"><code>&lt;Labeled&gt;</code></a></li>
    <li {% if page.path == 'ShowDialog.md' %} class="active" {% endif %}><a class="nav-link" href="./ShowDialog.html"><code>&lt;ShowDialog&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'ShowInDialogButton.md' %} class="active" {% endif %}><a class="nav-link" href="./ShowInDialogButton.html"><code>&lt;ShowInDialogButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useShowContext.md' %} class="active" {% endif %}><a class="nav-link" href="./useShowContext.html"><code>useShowContext</code></a></li>
    <li {% if page.path == 'useShowController.md' %} class="active" {% endif %}><a class="nav-link" href="./useShowController.html"><code>useShowController</code></a></li>
  </ul>

  <ul><div>Common</div>
    <li {% if page.path == 'WithRecord.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./WithRecord.html"><code>&lt;WithRecord&gt;</code></a></li>
    <li {% if page.path == 'useRecordContext.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./useRecordContext.html"><code>useRecordContext</code></a></li>
    <li {% if page.path == 'useGetRecordId.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetRecordId.html"><code>useGetRecordId</code></a></li>
    <li {% if page.path == 'useNotify.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./useNotify.html"><code>useNotify</code></a></li>
    <li {% if page.path == 'useRedirect.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./useRedirect.html"><code>useRedirect</code></a></li>
    <li {% if page.path == 'useRefresh.md' %} class="active" {% endif %}><a class="nav-link" href="./useRefresh.html"><code>useRefresh</code></a></li>
  </ul>

  <ul><div>Fields</div>
    <li {% if page.path == 'Fields.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Fields.html">Introduction</a></li>
    <li {% if page.path == 'FieldsForRelationships.md' %} class="active" {% endif %}><a class="nav-link" href="./FieldsForRelationships.html">Fields for Relationships</a></li>
    <li {% if page.path == 'ArrayField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ArrayField.html"><code>&lt;ArrayField&gt;</code></a></li>
    <li {% if page.path == 'BooleanField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./BooleanField.html"><code>&lt;BooleanField&gt;</code></a></li>
    <li {% if page.path == 'ChipField.md' %} class="active" {% endif %}><a class="nav-link" href="./ChipField.html"><code>&lt;ChipField&gt;</code></a></li>
    <li {% if page.path == 'DateField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./DateField.html"><code>&lt;DateField&gt;</code></a></li>
    <li {% if page.path == 'EmailField.md' %} class="active" {% endif %}><a class="nav-link" href="./EmailField.html"><code>&lt;EmailField&gt;</code></a></li>
    <li {% if page.path == 'FileField.md' %} class="active" {% endif %}><a class="nav-link" href="./FileField.html"><code>&lt;FileField&gt;</code></a></li>
    <li {% if page.path == 'FunctionField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./FunctionField.html"><code>&lt;FunctionField&gt;</code></a></li>
    <li {% if page.path == 'ImageField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ImageField.html"><code>&lt;ImageField&gt;</code></a></li>
    <li {% if page.path == 'MarkdownField.md' %} class="active" {% endif %}><a class="nav-link" href="./MarkdownField.html"><code>&lt;MarkdownField&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'NumberField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./NumberField.html"><code>&lt;NumberField&gt;</code></a></li>
    <li {% if page.path == 'RecordField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./RecordField.html"><code>&lt;RecordField&gt;</code></a></li>
    <li {% if page.path == 'ReferenceField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ReferenceField.html"><code>&lt;ReferenceField&gt;</code></a></li>
    <li {% if page.path == 'ReferenceArrayField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ReferenceArrayField.html"><code>&lt;ReferenceArrayField&gt;</code></a></li>
    <li {% if page.path == 'ReferenceManyField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ReferenceManyField.html"><code>&lt;ReferenceManyField&gt;</code></a></li>
    <li {% if page.path == 'ReferenceManyCount.md' %} class="active" {% endif %}><a class="nav-link" href="./ReferenceManyCount.html"><code>&lt;ReferenceManyCount&gt;</code></a></li>
    <li {% if page.path == 'ReferenceManyToManyField.md' %} class="active" {% endif %}><a class="nav-link" href="./ReferenceManyToManyField.html"><code>&lt;ReferenceManyToManyField&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'ReferenceOneField.md' %} class="active" {% endif %}><a class="nav-link" href="./ReferenceOneField.html"><code>&lt;ReferenceOneField&gt;</code></a></li>
    <li {% if page.path == 'RichTextField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./RichTextField.html"><code>&lt;RichTextField&gt;</code></a></li>
    <li {% if page.path == 'SelectField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SelectField.html"><code>&lt;SelectField&gt;</code></a></li>
    <li {% if page.path == 'TextArrayField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./TextArrayField.html"><code>&lt;TextArrayField&gt;</code></a></li>
    <li {% if page.path == 'TextField.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./TextField.html"><code>&lt;TextField&gt;</code></a></li>
    <li {% if page.path == 'TranslatableFields.md' %} class="active" {% endif %}><a class="nav-link" href="./TranslatableFields.html"><code>&lt;TranslatableFields&gt;</code></a></li>
    <li {% if page.path == 'UrlField.md' %} class="active" {% endif %}><a class="nav-link" href="./UrlField.html"><code>&lt;UrlField&gt;</code></a></li>
    <li {% if page.path == 'WrapperField.md' %} class="active" {% endif %}><a class="nav-link" href="./WrapperField.html"><code>&lt;WrapperField&gt;</code></a></li>
    <li {% if page.path == 'useFieldValue.md' %} class="active" {% endif %}><a class="nav-link" href="./useFieldValue.html"><code>useFieldValue</code></a></li>
  </ul>

  <ul><div>Inputs</div>
    <li {% if page.path == 'Inputs.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Inputs.html">Introduction</a></li>
    <li {% if page.path == 'ArrayInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ArrayInput.html"><code>&lt;ArrayInput&gt;</code></a></li>
    <li {% if page.path == 'AutocompleteInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./AutocompleteInput.html"><code>&lt;AutocompleteInput&gt;</code></a></li>
    <li {% if page.path == 'AutocompleteArrayInput.md' %} class="active" {% endif %}><a class="nav-link" href="./AutocompleteArrayInput.html"><code>&lt;AutocompleteArrayInput&gt;</code></a></li>
    <li {% if page.path == 'BooleanInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./BooleanInput.html"><code>&lt;BooleanInput&gt;</code></a></li>
    <li {% if page.path == 'CheckboxGroupInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./CheckboxGroupInput.html"><code>&lt;CheckboxGroupInput&gt;</code></a></li>
    <li {% if page.path == 'DateInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./DateInput.html"><code>&lt;DateInput></code></a></li>
    <li {% if page.path == 'DateRangeInput.md' %} class="active" {% endif %}><a class="nav-link" href="./DateRangeInput.html"><code>&lt;DateRangeInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'DateTimeInput.md' %} class="active" {% endif %}><a class="nav-link" href="./DateTimeInput.html"><code>&lt;DateTimeInput&gt;</code></a></li>
    <li {% if page.path == 'DualListInput.md' %} class="active" {% endif %}><a class="nav-link" href="./DualListInput.html"><code>&lt;DualListInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'FileInput.md' %} class="active" {% endif %}><a class="nav-link" href="./FileInput.html"><code>&lt;FileInput&gt;</code></a></li>
    <li {% if page.path == 'ImageInput.md' %} class="active" {% endif %}><a class="nav-link" href="./ImageInput.html"><code>&lt;ImageInput&gt;</code></a></li>
    <li {% if page.path == 'InPlaceEditor.md' %} class="active" {% endif %}><a class="nav-link" href="./InPlaceEditor.html"><code>&lt;InPlaceEditor&gt;</code></a></li>
    <li {% if page.path == 'MarkdownInput.md' %} class="active" {% endif %}><a class="nav-link" href="./MarkdownInput.html"><code>&lt;MarkdownInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'NullableBooleanInput.md' %} class="active" {% endif %}><a class="nav-link" href="./NullableBooleanInput.html"><code>&lt;NullableBooleanInput&gt;</code></a></li>
    <li {% if page.path == 'NumberInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./NumberInput.html"><code>&lt;NumberInput&gt;</code></a></li>
    <li {% if page.path == 'PasswordInput.md' %} class="active" {% endif %}><a class="nav-link" href="./PasswordInput.html"><code>&lt;PasswordInput&gt;</code></a></li>
    <li {% if page.path == 'PredictiveTextInput.md' %} class="active" {% endif %}><a class="nav-link" href="./PredictiveTextInput.html"><code>&lt;PredictiveTextInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'RadioButtonGroupInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./RadioButtonGroupInput.html"><code>&lt;RadioButtonGroupInput&gt;</code></a></li>
    <li {% if page.path == 'ReferenceInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ReferenceInput.html"><code>&lt;ReferenceInput&gt;</code></a></li>
    <li {% if page.path == 'ReferenceArrayInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./ReferenceArrayInput.html"><code>&lt;ReferenceArrayInput&gt;</code></a></li>
    <li {% if page.path == 'ReferenceManyInput.md' %} class="active" {% endif %}><a class="nav-link" href="./ReferenceManyInput.html"><code>&lt;ReferenceManyInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'ReferenceManyToManyInput.md' %} class="active" {% endif %}><a class="nav-link" href="./ReferenceManyToManyInput.html"><code>&lt;ReferenceManyToManyInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'ReferenceNodeInput.md' %} class="active" {% endif %}><a class="nav-link" href="./ReferenceNodeInput.html"><code>&lt;ReferenceNodeInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'ReferenceOneInput.md' %} class="active" {% endif %}><a class="nav-link" href="./ReferenceOneInput.html"><code>&lt;ReferenceOneInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'RichTextInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./RichTextInput.html"><code>&lt;RichTextInput&gt;</code></a></li>
    <li {% if page.path == 'SearchInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SearchInput.html"><code>&lt;SearchInput&gt;</code></a></li>
    <li {% if page.path == 'SelectInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SelectInput.html"><code>&lt;SelectInput&gt;</code></a></li>
    <li {% if page.path == 'SelectArrayInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SelectArrayInput.html"><code>&lt;SelectArrayInput&gt;</code></a></li>
    <li {% if page.path == 'SimpleFormIterator.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SimpleFormIterator.html"><code>&lt;SimpleFormIterator&gt;</code></a></li>
    <li {% if page.path == 'SmartRichTextInput.md' %} class="active" {% endif %}><a class="nav-link" href="./SmartRichTextInput.html"><code>&lt;SmartRichTextInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'TextArrayInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./TextArrayInput.html"><code>&lt;TextArrayInput&gt;</code></a></li>
    <li {% if page.path == 'TextInput.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./TextInput.html"><code>&lt;TextInput&gt;</code></a></li>
    <li {% if page.path == 'TimeInput.md' %} class="active" {% endif %}><a class="nav-link" href="./TimeInput.html"><code>&lt;TimeInput&gt;</code></a></li>
    <li {% if page.path == 'TranslatableInputs.md' %} class="active" {% endif %}><a class="nav-link" href="./TranslatableInputs.html"><code>&lt;TranslatableInputs&gt;</code></a></li>
    <li {% if page.path == 'TreeInput.md' %} class="active" {% endif %}><a class="nav-link" href="./TreeInput.html"><code>&lt;TreeInput&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useInput.md' %} class="active" {% endif %}><a class="nav-link" href="./useInput.html"><code>useInput</code></a></li>
  </ul>

  <ul><div>Preferences</div>
    <li {% if page.path == 'useStore.md' %} class="active" {% endif %}><a class="nav-link" href="./useStore.html"><code>useStore</code></a></li>
    <li {% if page.path == 'useRemoveFromStore.md' %} class="active" {% endif %}><a class="nav-link" href="./useRemoveFromStore.html"><code>useRemoveFromStore</code></a></li>
    <li {% if page.path == 'useResetStore.md' %} class="active" {% endif %}><a class="nav-link" href="./useResetStore.html"><code>useResetStore</code></a></li>
    <li {% if page.path == 'useStoreContext.md' %} class="active" {% endif %}><a class="nav-link" href="./useStoreContext.html"><code>useStoreContext</code></a></li>
    <li {% if page.path == 'Configurable.md' %} class="active" {% endif %}><a class="nav-link" href="./Configurable.html"><code>&lt;Configurable&gt;</code></a></li>
  </ul>

  <ul><div>I18N Provider and Translations</div>
    <li {% if page.path == 'TranslationSetup.md' %} class="active" {% endif %}><a class="nav-link" href="./TranslationSetup.html">Setting Up</a></li>
    <li {% if page.path == 'TranslationLocales.md' %} class="active" {% endif %}><a class="nav-link" href="./TranslationLocales.html">Supported Locales</a></li>
    <li {% if page.path == 'TranslationTranslating.md' %} class="active" {% endif %}><a class="nav-link" href="./TranslationTranslating.html">Translating UI Components</a></li>
    <li {% if page.path == 'TranslationWriting.md' %} class="active" {% endif %}><a class="nav-link" href="./TranslationWriting.html">Writing an i18nProvider</a></li>
    <li {% if page.path == 'Translate.md' %} class="active" {% endif %}><a class="nav-link" href="./Translate.html"><code>&lt;Translate&gt;</code></a></li>
    <li {% if page.path == 'useTranslate.md' %} class="active" {% endif %}><a class="nav-link" href="./useTranslate.html"><code>useTranslate</code></a></li>
    <li {% if page.path == 'useLocaleState.md' %} class="active" {% endif %}><a class="nav-link" href="./useLocaleState.html"><code>useLocaleState</code></a></li>
    <li {% if page.path == 'LocalesMenuButton.md' %} class="active" {% endif %}><a class="nav-link" href="./LocalesMenuButton.html"><code>&lt;LocalesMenuButton&gt;</code></a></li>
  </ul>

  <ul><div>Other UI components</div>
    <li {% if page.path == 'Layout.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Layout.html"><code>&lt;Layout&gt;</code></a></li>
    <li {% if page.path == 'ContainerLayout.md' %} class="active" {% endif %}><a class="nav-link" href="./ContainerLayout.html"><code>&lt;ContainerLayout&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'HorizontalMenu.md' %} class="active" {% endif %}><a class="nav-link" href="./HorizontalMenu.html"><code>&lt;HorizontalMenu&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'SolarLayout.md' %} class="active" {% endif %}><a class="nav-link" href="./SolarLayout.html"><code>&lt;SolarLayout&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'AppBar.md' %} class="active" {% endif %}><a class="nav-link" href="./AppBar.html"><code>&lt;AppBar&gt;</code></a></li>
    <li {% if page.path == 'Menu.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Menu.html"><code>&lt;Menu&gt;</code></a></li>
    <li {% if page.path == 'MultiLevelMenu.md' %} class="active" {% endif %}><a class="nav-link" href="./MultiLevelMenu.html"><code>&lt;MultiLevelMenu&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'IconMenu.md' %} class="active" {% endif %}><a class="nav-link" href="./IconMenu.html"><code>&lt;IconMenu&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'Title.md' %} class="active" {% endif %}><a class="nav-link" href="./Title.html"><code>&lt;Title&gt;</code></a></li>
    <li {% if page.path == 'Breadcrumb.md' %} class="active" {% endif %}><a class="nav-link" href="./Breadcrumb.html"><code>&lt;Breadcrumb&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'Search.md' %} class="active" {% endif %}><a class="nav-link" href="./Search.html"><code>&lt;Search&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'SearchWithResult.md' %} class="active" {% endif %}><a class="nav-link" href="./SearchWithResult.html"><code>&lt;SearchWithResult&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'Confirm.md' %} class="active" {% endif %}><a class="nav-link" href="./Confirm.html"><code>&lt;Confirm&gt;</code></a></li>
    <li {% if page.path == 'Buttons.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Buttons.html">Buttons</a></li>
    <li {% if page.path == 'RevisionsButton.md' %} class="active" {% endif %}><a class="nav-link" href="./RevisionsButton.html"><code>&lt;RevisionsButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'CheckForApplicationUpdate.md' %} class="active" {% endif %}><a class="nav-link" href="./CheckForApplicationUpdate.html"><code>&lt;CheckForApplicationUpdate&gt;</code></a></li>
    <li {% if page.path == 'RecordRepresentation.md' %} class="active" {% endif %}><a class="nav-link" href="./RecordRepresentation.html"><code>&lt;RecordRepresentation&gt;</code></a></li>
    <li {% if page.path == 'PrevNextButtons.md' %} class="active" {% endif %}><a class="nav-link" href="./PrevNextButtons.html"><code>&lt;PrevNextButtons&gt;</code></a></li>
    <li {% if page.path == 'useDefineAppLocation.md' %} class="active" {% endif %}><a class="nav-link" href="./useDefineAppLocation.html"><code>useDefineAppLocation</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetRecordRepresentation.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetRecordRepresentation.html"><code>useGetRecordRepresentation</code></a></li>
  </ul>

  <ul><div>Theming</div>
    <li {% if page.path == 'SX.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SX.html">The <code>sx</code> prop</a></li>
    <li {% if page.path == 'AppTheme.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./AppTheme.html">Application Theme</a></li>
    <li {% if page.path == 'BoxStackGrid.md' %} class="active" {% endif %}><a class="nav-link" href="./BoxStackGrid.html"><code>&lt;Box&gt;</code>, <code>&lt;Stack&gt;</code> and <code>&lt;Grid&gt;</code></a></li>
    <li {% if page.path == 'ToggleThemeButton.md' %} class="active" {% endif %}><a class="nav-link" href="./ToggleThemeButton.html"><code>&lt;ToggleThemeButton&gt;</code></a></li>
    <li {% if page.path == 'useMediaQuery.md' %} class="active" {% endif %}><a class="nav-link" href="./useMediaQuery.html"><code>useMediaQuery</code></a></li>
    <li {% if page.path == 'useTheme.md' %} class="active" {% endif %}><a class="nav-link" href="./useTheme.html"><code>useTheme</code></a></li>
  </ul>

  <ul><div>Realtime</div>
    <li {% if page.path == 'RealtimeDataProvider.md' %} class="active" {% endif %}><a class="nav-link" href="./RealtimeDataProvider.html">Setting Up</a></li>
    <li {% if page.path == 'usePublish.md' %} class="active" {% endif %}><a class="nav-link" href="./usePublish.html"><code>usePublish</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useSubscribe.md' %} class="active" {% endif %}><a class="nav-link" href="./useSubscribe.html"><code>useSubscribe</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useSubscribeCallback.md' %} class="active" {% endif %}><a class="nav-link" href="./useSubscribeCallback.html"><code>useSubscribeCallback</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useSubscribeToRecord.md' %} class="active" {% endif %}><a class="nav-link" href="./useSubscribeToRecord.html"><code>useSubscribeToRecord</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useSubscribeToRecordList.md' %} class="active" {% endif %}><a class="nav-link" href="./useSubscribeToRecordList.html"><code>useSubscribeToRecordList</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useLock.md' %} class="active" {% endif %}><a class="nav-link" href="./useLock.html"><code>useLock</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useUnlock.md' %} class="active" {% endif %}><a class="nav-link" href="./useUnlock.html"><code>useUnlock</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetLock.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetLock.html"><code>useGetLock</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetLockLive.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetLockLive.html"><code>useGetLockLive</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetLocks.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetLocks.html"><code>useGetLocks</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetLocksLive.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetLocksLive.html"><code>useGetLocksLive</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useLockCallbacks.md' %} class="active" {% endif %}><a class="nav-link" href="./useLockCallbacks.html"><code>useLockCallbacks</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useLockOnMount.md' %} class="active" {% endif %}><a class="nav-link" href="./useLockOnMount.html"><code>useLockOnMount</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useLockOnCall.md' %} class="active" {% endif %}><a class="nav-link" href="./useLockOnCall.html"><code>useLockOnCall</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetListLive.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetListLive.html"><code>useGetListLive</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetOneLive.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetOneLive.html"><code>useGetOneLive</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'ListLiveUpdate.md' %} class="active" {% endif %}><a class="nav-link" href="./ListLiveUpdate.html"><code>&lt;ListLiveUpdate&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'LockOnMount.md' %} class="active" {% endif %}><a class="nav-link" href="./LockOnMount.html"><code>&lt;LockOnMount&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'LockStatus.md' %} class="active" {% endif %}><a class="nav-link" href="./LockStatus.html"><code>&lt;LockStatus&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'EditLive.md' %} class="active" {% endif %}><a class="nav-link" href="./EditLive.html"><code>&lt;EditLive&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'ShowLive.md' %} class="active" {% endif %}><a class="nav-link" href="./ShowLive.html"><code>&lt;ShowLive&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'MenuLive.md' %} class="active" {% endif %}><a class="nav-link" href="./MenuLive.html"><code>&lt;MenuLive&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
  </ul>

  <ul><div>Soft Delete</div>
    <li {% if page.path == 'SoftDeleteDataProvider.md' %} class="active" {% endif %}><a class="nav-link" href="./SoftDeleteDataProvider.html">Setting Up</a></li>
    <li {% if page.path == 'SoftDeleteButton.md' %} class="active" {% endif %}><a class="nav-link" href="./SoftDeleteButton.html"><code>SoftDeleteButton</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'SoftDeleteWithConfirmButton.md' %} class="active" {% endif %}><a class="nav-link" href="./SoftDeleteWithConfirmButton.html"><code>SoftDeleteWithConfirmButton</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'BulkSoftDeleteButton.md' %} class="active" {% endif %}><a class="nav-link" href="./BulkSoftDeleteButton.html"><code>BulkSoftDeleteButton</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'DeletedRecordsList.md' %} class="active" {% endif %}><a class="nav-link" href="./DeletedRecordsList.html"><code>DeletedRecordsList</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'DeletedRecordsListMenuItem.md' %} class="active" {% endif %}><a class="nav-link" href="./DeletedRecordsListMenuItem.html"><code>DeletedRecordsListMenuItem</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'ShowDeleted.md' %} class="active" {% endif %}><a class="nav-link" href="./ShowDeleted.html"><code>ShowDeleted</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useSoftDelete.md' %} class="active" {% endif %}><a class="nav-link" href="./useSoftDelete.html"><code>useSoftDelete</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useSoftDeleteMany.md' %} class="active" {% endif %}><a class="nav-link" href="./useSoftDeleteMany.html"><code>useSoftDeleteMany</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetListDeleted.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetListDeleted.html"><code>useGetListDeleted</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useGetOneDeleted.md' %} class="active" {% endif %}><a class="nav-link" href="./useGetOneDeleted.html"><code>useGetOneDeleted</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useRestoreOne.md' %} class="active" {% endif %}><a class="nav-link" href="./useRestoreOne.html"><code>useRestoreOne</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useRestoreMany.md' %} class="active" {% endif %}><a class="nav-link" href="./useRestoreMany.html"><code>useRestoreMany</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useHardDelete.md' %} class="active" {% endif %}><a class="nav-link" href="./useHardDelete.html"><code>useHardDelete</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useHardDeleteMany.md' %} class="active" {% endif %}><a class="nav-link" href="./useHardDeleteMany.html"><code>useHardDeleteMany</code><img class="premium" src="./img/premium.svg" /></a></li>
    <li {% if page.path == 'useDeletedRecordsListController.md' %} class="active" {% endif %}><a class="nav-link" href="./useDeletedRecordsListController.html"><code>useDeletedRecordsListController</code><img class="premium" src="./img/premium.svg" /></a></li>
  </ul>

  <ul><div>Recipes</div>
    <li {% if page.path == 'Caching.md' %} class="active" {% endif %}><a class="nav-link" href="./Caching.html">Caching</a></li>
    <li {% if page.path == 'UnitTesting.md' %} class="active" {% endif %}><a class="nav-link" href="./UnitTesting.html">Unit Testing</a></li>
    <li {% if page.path == 'TanStackRouter.md' %} class="active" {% endif %}><a class="nav-link" href="./TanStackRouter.html">TanStack Router</a></li>
    <li {% if page.path == 'AdvancedTutorials.md' %} class="active" {% endif %}><a class="nav-link" href="./AdvancedTutorials.html">Advanced tutorials</a></li>
  </ul>

  <li {% if page.path == 'Ecosystem.md' %} class="active" {% endif %}><a class="nav-link" href="./Ecosystem.html">Ecosystem</a></li>
  <li {% if page.path == 'Contributing.md' %} class="active" {% endif %}><a class="nav-link" href="./Contributing.html">Contributing</a></li>
  <li {% if page.path == 'FAQ.md' %} class="active" {% endif %}><a class="nav-link" href="./FAQ.html">FAQ</a></li>
  <li {% if page.path == 'Reference.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./Reference.html">Index</a></li>

  <div class="beginner-mode-on" style="margin:1em;padding:1em;background:#ffffca;border-radius:4px;display:none;font-size:0.8em;opacity:0.8;text-align:center;">
    <a href="#beginner-mode">Beginner mode is on</a>. Turn it off to reveal more documentation for advanced components.
  </div>