Chapter 4. Getting Started with the UI

The Drupal 8 user interface

In this chapter, we will walk you through the key parts of the standard Drupal 8 User Interface (UI) UI focusing our attention on the main visible components like the Toolbar, Shortcuts and Drupal's main administrative menu, the Administration menu.

As you work through this chapter, please keep in mind that the intention here is merely to provide you with a quick overview and that much more detail and guided tutorial assignments will follow in later chapters.

Logging out

When you first visit your new Drupal 8 site immediately after installation at: http://drupal-8.dd:8083 you will do so, from the point of view of the admin user, that is, you are logged in as the special user with user ID (uid) set to 1.

To see the site from an anonymous site visitor's perspective, click on the Log out link at the top right of the page:

Logging in

You will now see only the login link at the top right corner of the page:

Log back in using the credentials you set up in Chapter 2, Installation.

After logging in again, click on the Home tab or Drupal logo to go back to the front page.

Front page

We will now walk you through the page in order to illustrate what we were talking about back in and views:

Tip

If your screen does not look exactly like the previous screenshot, try changing the width of your browser. The page layout will change, depending on the available size of the window. Matching the window size we used for the screenshots will help you get acquainted more quickly.

The default front page comprises the following elements:

1. The Toolbar, which in turn contains four icons: Manage, Shortcuts, the currently logged in user (admin), and at the right-hand end, the Edit toggle icon that reveals / hides the contextual links (the encircled pencil icons that appear as you hover over editable content, see later).
2. The Tray, which is immediately underneath the Toolbar, is a set of illustrated links that relates to the top level of the Administration menu.
3. The Main menu, which is also hard coded in the default theme page template.
4. The Search block is provided by the Search module, which is active by default.
5. The Main content (a view) of the page in this case is provided by a View, which lists all of the content of any type that has been promoted to the front page. On a brand new site, there isn't any content, so don't expect to see much here.
6. The Tools menu, like most things, exposed as a block.

In addition, at the bottom of the page you will see the Footer, which contains the following:

1. The Footer menu (a block), which again can be contributed to by any module. In a fresh installation, the only module which is contributing a menu item is the Contact module. This is itself switched on by default.
2. The Powered by Drupal block is provided by the core System module.
   

By default, the Toolbar module displays links to top-level items from the core Administration menu of which, in a standard install, there is only one: Administration which itself comprises: Content, Structure, Appearance, Extend, Configuration, People, Reports, and Help.

Other modules have the opportunity to add extra links at any level with associated icons.

Let's experiment a little with it now, to illustrate some key navigation points. Click on the Manage link to show/hide the default set in the Tray which houses the Administration menu as follows:

Repositioning the tray

You can easily toggle the position of the Tray between horizontal and vertical modes by clicking on the position toggle icon at the far right-hand side:

We'll now step through each item in the tray (although not in quite the order that you see them presented on the screen), and cover the basic features provided by each. Before we do that, let's first introduce three key ideas: