docs/obsidian-developer/Plugins/User interface/Status bar.md

To create a new block in the status bar, call the [[addStatusBarItem|addStatusBarItem()]] in the onload() method. The addStatusBarItem() method returns an [[HTML elements]] that you can add your own elements to.

Obsidian mobile Custom status bar items are not supported on Obsidian mobile apps.

import { Plugin } from "obsidian";

export default class ExamplePlugin extends Plugin {
  async onload() {
    const item = this.addStatusBarItem();
    item.createEl("span", { text: "Hello from the status bar 👋" });
  }
}

For more information on how to use the createEl() method, refer to [[HTML elements]].

You can add multiple status bar items by calling addStatusBarItem() multiple times. Since Obsidian adds a gap between them, you need to create multiple HTML element on the same status bar item if you need more control of spacing.

import { Plugin } from "obsidian";

export default class ExamplePlugin extends Plugin {
  async onload() {
    const fruits = this.addStatusBarItem();
    fruits.createEl("span", { text: "🍎" });
    fruits.createEl("span", { text: "🍌" });

    const veggies = this.addStatusBarItem();
    veggies.createEl("span", { text: "🥦" });
    veggies.createEl("span", { text: "🥬" });
  }
}

The example above results in the following status bar:

![[status-bar.png]]