Electron Projects

Adding an application menu

To see how easy it is to consume Bluprint components, let's add an application menu or application toolbar:

1. First, append the following code to the index.css file:

@import '~normalize.css';@import '~@blueprintjs/core/lib/css/blueprint.css';@import '~@blueprintjs/icons/lib/css/blueprint-icons.css';

2. Then, go to the src/App.js file and import the following types from the @blueprintjs/core package:

import { Navbar, Button, Alignment } from '@blueprintjs/core';

3. This allows you to use the Navbar and Button components, as well as the Alignment enumerable, in your JSX templates. Update the code according to the following listing:

<Navbar>  <Navbar.Group align={Alignment.LEFT}> <Navbar.Heading>Blueprint</Navbar.Heading> ...