tiptap/docs/api/nodes/bullet-list.md

# BulletList
[![Version](https://img.shields.io/npm/v/@tiptap/extension-bullet-list.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bullet-list)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bullet-list.svg)](https://npmcharts.com/compare/@tiptap/extension-bullet-list?minimal=true)

This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.

Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list.

## Installation
```bash
# with npm
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item

# with Yarn
yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
```

This extension requires the [`ListItem`](/api/nodes/list-item) node.

## Settings
| Option         | Type     | Default | Description                                                           |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}`    | Custom HTML attributes that should be added to the rendered HTML tag. |

## Commands
| Command    | Parameters | Description           |
| ---------- | ---------- | --------------------- |
| bulletList | —          | Toggle a bullet list. |

## Keyboard shortcuts
| Command          | Windows/Linux                   | macOS                       |
| ---------------- | ------------------------------- | --------------------------- |
| toggleBulletList | `Control`&nbsp;`Shift`&nbsp;`8` | `Cmd`&nbsp;`Shift`&nbsp;`8` |

## Source code
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/)

## Usage
<tiptap-demo name="Nodes/BulletList"></tiptap-demo>
move all extensions to separate pages 2020-08-19 03:39:41 +08:00			`# BulletList`
docs: add badges to all extensions 2021-01-25 17:35:52 +08:00			`[![Version](https://img.shields.io/npm/v/@tiptap/extension-bullet-list.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bullet-list)`
			`[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bullet-list.svg)](https://npmcharts.com/compare/@tiptap/extension-bullet-list?minimal=true)`

update content, add text align justify 2020-11-03 23:13:13 +08:00			This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
a ton of improvements 2020-09-23 18:03:03 +08:00			`Type <code>* </code>, <code>- </code> or <code>+ </code> at the beginning of a new line and it will magically transform to a bullet list.`
improve the bullet list page 2020-09-15 23:26:42 +08:00
a ton of improvements 2020-09-23 18:03:03 +08:00			`## Installation`
add installation instructions to all extensions 2020-09-23 15:52:04 +08:00			```bash
update content 2020-10-30 21:24:16 +08:00			`# with npm`
a ton of improvements 2020-09-23 18:03:03 +08:00			`npm install @tiptap/extension-bullet-list @tiptap/extension-list-item`
add installation instructions to all extensions 2020-09-23 15:52:04 +08:00
update content 2020-10-30 21:24:16 +08:00			`# with Yarn`
a ton of improvements 2020-09-23 18:03:03 +08:00			`yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item`
add installation instructions to all extensions 2020-09-23 15:52:04 +08:00			```

docs: update content 2021-02-12 22:02:40 +08:00			This extension requires the [`ListItem`](/api/nodes/list-item) node.

a ton of improvements 2020-09-23 18:03:03 +08:00			`## Settings`
docs: add HTMLAttributes 2020-11-18 19:12:34 +08:00			`\| Option \| Type \| Default \| Description \|`
			`\| -------------- \| -------- \| ------- \| --------------------------------------------------------------------- \|`
			\| HTMLAttributes \| `Object` \| `{}` \| Custom HTML attributes that should be added to the rendered HTML tag. \|
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
improve the extensions documentation 2020-08-20 21:33:16 +08:00			`## Commands`
docs: add HTMLAttributes 2020-11-18 19:12:34 +08:00			`\| Command \| Parameters \| Description \|`
			`\| ---------- \| ---------- \| --------------------- \|`
rename schema names 2020-11-04 03:57:09 +08:00			`\| bulletList \| — \| Toggle a bullet list. \|`
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
rename keybindings to keyboard shortcuts 2020-09-10 17:24:33 +08:00			`## Keyboard shortcuts`
docs: make all node keyboard shortcuts a table 2021-10-02 04:57:27 +08:00			`\| Command \| Windows/Linux \| macOS \|`
			`\| ---------------- \| ------------------------------- \| --------------------------- \|`
			\| toggleBulletList \| `Control` `Shift` `8` \| `Cmd` `Shift` `8` \|
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
minor improvements 2020-09-21 22:59:28 +08:00			`## Source code`
replace link to GitHub repository 2021-04-21 21:31:11 +08:00			`[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/)`
move all extensions to separate pages 2020-08-19 03:39:41 +08:00
add a demo to the bullet list extension page 2020-09-15 22:50:54 +08:00			`## Usage`
replace demo component with custom element 2021-08-26 05:10:20 +08:00			`<tiptap-demo name="Nodes/BulletList"></tiptap-demo>`