Skip to main content

DocCardList Splitting

Normal DocCardList​

You can embed the generated cards list in a normal doc page. It will display all docs of the current folder. Add the DocCardList component on any doc:

docs/site-generators/docusaurus/doc-card-list-splitting.md
import DocCardList from '@theme/DocCardList';

<DocCardList />

You should see all docs as a card list:

http://localhost:3000

All docs in folder​

Splitting DocCardList​

If you want to split the card list you can add useCurrentSidebarCategory hook with the items prop and additional logic:

any doc page
import DocCardList from '@theme/DocCardList';  
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

### First 2 docs

<DocCardList items={[...[...useCurrentSidebarCategory().items].map((_,i)=>i<2?_:null).filter(Boolean)]} />

### Another 4 docs

<DocCardList items={[...[...useCurrentSidebarCategory().items].map((_,i)=>(i>1&&i<6)?_:null).filter(Boolean)]} />

### Rest docs not shown
http://localhost:3000

First 2 docs​

Another 4 docs​

Rest docs not shown​