Make the navigation wrapping ul component user customisable #9153
Conversation
| @@ -0,0 +1,8 @@ | |||
| --- | |||
| "@keystone-6/core": major | |||
There was a problem hiding this comment.
Technically a breaking change? ... custom Navigation in the Admin UI will render weirdly or have invalid DOM structure if not updated.
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 20fe773:
|
| ### ListNavItem | ||
|
|
||
| This component will render a single `NavItem` for the given list. | ||
|
|
||
| ```tsx | ||
| import { ListNavItem } from '@keystone-6/core/admin-ui/components' | ||
| ``` | ||
|
|
||
| In this example we create groups for our lists. | ||
|
|
||
| ```tsx | ||
| const listGroups = [ | ||
| [ | ||
| { name: 'People', lists: ['User', 'Bio', 'Role']}, | ||
| { name: 'Posts', lists: ['Post', 'Category', 'Tag']}, | ||
| ] | ||
| ]; | ||
|
|
||
| const CustomNavigation = ({ lists }) => ( | ||
| <NavigationContainer> | ||
| {listGroups.map(group => ( | ||
| <Box key={group.name}> | ||
| <H5 paddingX="xlarge">{group.name}</H5> | ||
| <NavItemGroup> | ||
| {group.lists.map((key) => { | ||
| const list = lists.find((l) => l.key === key); | ||
| return list ? <ListNavItem key={key} list={list} /> : null; | ||
| })} | ||
| </NavItemGroup> | ||
| </Box> | ||
| ))} | ||
| </NavigationContainer> | ||
| ) | ||
| ``` |
There was a problem hiding this comment.
Kind of a contrived example. You could do something like this1 with the ListNavItems component too but I wanted to show that this component is also exported.
Footnotes
-
Kind of like this. Using
<ListNavItems includes={[...]}you don't have control over the order in which the lists are shown, only which lists. ↩
| ``` | ||
|
|
||
| {% hint kind="warn" %} | ||
| Versions of `@keystone-6/core` before `1.2.0` wrapped all children of `NavigationContainer` with the `NavItemGroup` component. |
There was a problem hiding this comment.
I've guessed what the version number will be. Also I'm not sure we need to call out that this thing has changed.
The
NavigationContainercomponent rendered it's children inside aulmeaning if you wanted to render anything other than anliyou would have to do some gymnastics to make it work.This change makes it the users' responsibility to properly wrap list items in a
ul.NavItemGroupcomponent with appropriate styling