Skip to main content

Dashboard Layout

Create a multi-pane layout with header, sidebar, content, and footer.

Code​

import { Screen, Box, List } from '@unblessed/node';

const screen = new Screen({ smartCSR: true });

const container = new Box({
  parent: screen,
  width: '100%',
  height: '100%'
});

// Header
const header = new Box({
  parent: container,
  top: 0,
  left: 0,
  width: '100%',
  height: 3,
  content: '{center}{bold}{cyan-fg}My Dashboard{/cyan-fg}{/bold}{/center}',
  tags: true,
  style: {
    fg: 'white',
    bg: 'blue'
  }
});

// Sidebar
const sidebar = new List({
  parent: container,
  top: 3,
  left: 0,
  width: '30%',
  height: '100%-6',
  label: ' {bold}Menu{/bold} ',
  tags: true,
  keys: true,
  mouse: true,
  border: { type: 'line' },
  style: {
    border: { fg: 'cyan' },
    selected: { bg: 'cyan', fg: 'black' }
  },
  items: ['Dashboard', 'Users', 'Settings', 'Reports', 'Help']
});

// Main content
const content = new Box({
  parent: container,
  top: 3,
  left: '30%',
  width: '70%',
  height: '100%-6',
  border: { type: 'line' },
  style: { border: { fg: 'cyan' } },
  label: ' {bold}Content{/bold} ',
  tags: true,
  content: '{center}Select a menu item{/center}',
  scrollable: true
});

// Footer
const footer = new Box({
  parent: container,
  bottom: 0,
  left: 0,
  width: '100%',
  height: 3,
  content: '{center}Press q to quit | Use arrow keys to navigate{/center}',
  tags: true,
  style: {
    fg: 'white',
    bg: 'blue'
  }
});

sidebar.on('select', (item) => {
  const selected = item.getText();
  content.setContent(`{center}{bold}${selected}{/bold}{/center}\\n\\nThis is the ${selected} page.`);
  screen.render();
});

sidebar.focus();
screen.key(['q', 'C-c'], () => process.exit(0));
screen.render();

Try it Live​

Visit the Home Page and select "Dashboard Layout" from the examples to see this in action!

Layout Tips​

Percentage-based Sizing​

Use percentages for responsive layouts:

  • width: '30%' - Takes 30% of parent width
  • height: '100%-6' - Full height minus 6 lines

Absolute Positioning​

  • top: 0 - Top edge
  • bottom: 0 - Bottom edge
  • left: '30%' - 30% from left

Next Steps​