Agile UI
  • Overview of Agile UI
  • Quickstart
  • Core Concepts
  • File structure example & first app
  • Components
    • Core Components
    • Simple components
      • Button
      • Label
      • Text
      • LoremIpsum
      • Header
      • Breadcrumb
        • Basic Usage
        • Changing Divider
        • Working with Path
      • Icon
      • Image
      • Message
      • Tabs
      • Accordion
      • HelloWorld
    • Interactive components
    • Composite components
  • JavaScript Mapping
  • Advanced Topics
Agile UI
  • Components
  • Breadcrumb
  • View page source

Breadcrumb

class Atk4\Ui\Breadcrumb

Implement navigational Breadcrumb, by using https://fomantic-ui.com/collections/breadcrumb.html

Basic Usage

Atk4\Ui\Breadcrumb::addCrumb()
Atk4\Ui\Breadcrumb::set()

Here is a simple usage:

$crumb = Breadcrumb::addTo($app);
$crumb->addCrumb('User', ['user']);
$crumb->addCrumb('Preferences', ['user_preferences']);
$crumb->set('Change Password');

Every time you call addCrumb a new one is added. With set() you can specify the name of the current page. addCrumb also requires a URL passed as second argument which can be either a string or array (which would then be passed to url() (View::url).

Changing Divider

property Atk4\Ui\Breadcrumb::$dividerClass

By default value right angle icon is used, but you can change it to right chevron icon or simply set to empty string "" to use slash.

Working with Path

property Atk4\Ui\Breadcrumb::$path
Atk4\Ui\Breadcrumb::popTitle()

Calling addCrumb adds more elements into the $path property. Each element there would contain 3 hash values:

  • section - name that will appear to the user

  • link - where to go if clicked

  • divider - which divider to use after the crumb

By default divider is set to Breadcrumb::$dividerClass. You may also manipulate $path array yourself. For example the next code will use some logic:

$crumb = Breadcrumb::addTo($app);
$crumb->addCrumb('Users', []);

$model = new User($app->db);

$id = $app->stickyGet('user_id');
if ($id) {
    // perhaps we edit individual user?
    $entity = $model->load($id);
    $crumb->addCrumb($entity->get('name'), []);

    // here we can check for additional criteria and display a deeper level on the crumb

    Form::addTo($app)->setEntity($entity);
} else {
    // display list of users
    $table = Table::addTo($app);
    $table->setModel($model);
    $table->addDecorator(['name', [\Atk4\Ui\Table\Column\Link::class, [], ['user_id' => 'id']);
}

$crumb->popTitle();
Previous Next

© Copyright 2016-2025, Agile Toolkit.

Built with Sphinx using a theme provided by Read the Docs.