=====================
User Interface Basics
=====================

.. figure:: Images/UserInterface.png
   :alt: TYPO3 Neos User Interface
   :class: screenshot-fullsize

#. Toggle button for the Menu
#. The Navigate component
#. The Edit/Preview Panel
#. The Page tree
#. Publish button(s)
#. The Property Inspector
#. The Structure tree
#. The content canvas
#. Discard / Apply changes

Toggle button for the Menu
--------------------------

Show or hide the Module Menu using this button.

The Navigate component
----------------------

Using the Navigate component you can conveniently find your way through your contents. See 'The Page tree'.

The Edit/Preview Panel
----------------------

The Edit/Preview Panel gives you the possibility to switch between the (default) 'In Place' editing mode to
and from the 'Raw Content' editing mode.

It also contains the Preview section where you can choose between customizable presentation modes, i.e.
a print style and a default Desktop style.

The Page tree
-------------

The Page tree is filterable and searchable and can be edited inline.

Publish button(s)
-----------------

These publication buttons aggregate your changes which you can publish at your chosen time.

The Property Inspector
----------------------

The Property Inspector gives you detailed property editing options for the chosen nodetype, whether this be
a page or a content element.

The Structure tree
------------------

The Structure tree is a nodetype tree which gives you detailed information of how your content is structured.
It gives you information about which type, its position and its nesting level.
This can also be used to navigate the content of a page.

The content canvas
------------------

The content canvas is where you can add/edit your content.

Discard / Apply changes
-----------------------

TYPO3 Neos saves your changes on the fly as much as possible. When editing properties you must apply or discard
the changes you made.