CODEWITHSUNDEEP
phphtmlzend-framework2breadcrumbsview-helpers
devanerd
devanerd

Reputation: 365

ZF2 Breadcrumbs Helper - How to render it as an unordered list?

I'm new to Zend Framework2 and I´m asking for advice for the following situation:

I´m using the ZF2 Breadcrumbs Helper to create breadcrums on my project and this code:

 //breadcrumbs.phtml 

 echo $this->navigation('Navigation')
        ->breadcrumbs()
        ->setLinkLast(false)               // link last page
        ->setMaxDepth(7)                   // stop at level 7
        ->setMinDepth(0)                   // start at level 0
        ->setSeparator(' »' . PHP_EOL);    // separator with newline

when rendered looks like this:

Home » Lorem Ipsum1 » Lorem Ipsum2 » Current Crumb

Exploring the source code:

<div id="breadcrumbs">
    <a href="/">Home</a>
    »
    <a href="/">Lorem Ipsum1</a>
    »
    <a href="/">Lorem Ipsum2</a>
    » Current Crumb
</div>

So, my question is: using the Breadcrumb Helper how can I get the following source code to be able to style the Breadcrumbs the way I want to?

<div id="breadcrumbs">
    <ul id="breadcrumbs">
       <li><a href="">Home</a></li>
       <li><a href="">Lorem Ipsum1</a></li>
       <li><a href="">Lorem Ipsum2</a></li>
       <li><a href="" class="current">Current Crumb</a></li>
    </ul>
</div>

Upvotes: 7

Views: 5274

Answers (5)

Farkhod Daniyarov
Farkhod Daniyarov

Reputation: 828

For ZF3

file: partial/breadcrumbs.phtml 

<?php
/**
 * Zend breadcrumb partial
 *
 * @date 12.09.2018 16:47
 * @var $this \Zend\View\Renderer\PhpRenderer
 * @var $page \Zend\Navigation\Page\AbstractPage
 */

if (0 == count($this->pages)) {
    return;
}
?>
<ul class="breadcrumb">
    <?php foreach ($this->pages as $page) :?>
        <?php if ($page->isActive()): ?>
            <li class="active"><?= $page->getLabel() ?></li>
        <?php else : ?>
            <li><a href="<?= $page->getHref()?>"><?= $page->getLabel() ?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>

file: ./config/autoload/navigation.global.php 

<?php
return [
    'navigation' => [
        'breadcrumb' => [
            [
                'label' => 'Home',
                'route' => 'home',
                'pages' => [
                    [
                        'label' => 'Page - 1',
                        'route' => 'doc',
                        'pages' => [
                            [
                                'label' => 'Sub page 2',
                                'route' => 'doc/page',
                                'params' => ['page' => 'control-panel'],
                            ],
                        ]
                    ],
                ]
            ],
        ],
    ],
];

On the view

<?= $this->navigation('Zend\Navigation\Breadcrumb')
         ->breadcrumbs()
         ->setPartial('partial/breadcrumbs.phtml')
?>

Upvotes: 0

Serhii Popov
Serhii Popov

Reputation: 3804

I know this is an old question, but if someone wants a simple solution for render ul-li menu, you can use this code in your breadcrumbs.phtml:

<?php $breadcrumbs = $this->navigation()->breadcrumbs()->setMinDepth(0); ?>
<?php $items = array_filter(explode($breadcrumbs->getSeparator(), $breadcrumbs->render())); ?>
<?php if ($items) : ?>
    <ul class="breadcrumbs">
        <?php foreach ($items as $item) : ?>
            <li><?= $item ?></li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Upvotes: 0

Andrew
Andrew

Reputation: 12809

You can use the view helper to set a partial to use:

<?php $partial = array('application/navigation/breadcrumbs.phtml', 'default') ?>
<?php $this->navigation('navigation')->breadcrumbs()->setPartial($partial) ?>
<?php echo $this->navigation('navigation')->breadcrumbs()->render() ?>

And then your partial would be something like this (application/navigation/breadcrumbs.phtml):

<?php $container = $this->navigation()->breadcrumbs()  ?>
<?php /* @var $container \Zend\View\Helper\Navigation\Breadcrumbs */ ?>
<?php $navigation = $container->getContainer() ?>
<?php /* @var $navigation \Zend\Navigation\Navigation */ ?>

<ul class="breadcrumb">
    <li><a href="<?php echo $this->url('soemroute') ?>">Home</a> <span class="divider">/</span></li>
    <?php foreach($this->pages as $page): ?>
        <?php /* @var $page \Zend\Navigation\Page\Mvc */ ?>
        <?php if( ! $page->isActive()): ?>
            <li>
                <a href="<?php echo $page->getHref() ?>"><?php echo $page->getLabel() ?></a> 
                <span class="divider">/</span>
            </li>
        <?php else: ?>
            <li class="active">
                <?php if($container->getLinkLast()): ?><a href="<?php echo $page->getHref() ?>"><?php endif ?>
                <?php echo $page->getLabel() ?>
                <?php if($container->getLinkLast()): ?></a><?php endif ?>
            </li>
        <?php endif ?>
    <?php endforeach ?>
</ul>

Upvotes: 8

LuisComS
LuisComS

Reputation: 582

I just create a Twitter Bootstrap breadcrumb on my ZF2

breadcrumb.phtml

<?php
if (count($this->pages) > 0) :
?>
<ol class="breadcrumb">
<?php
for ($i = 0, $iend = count($this->pages); $i < $iend; $i++) :
    $a=$this->pages[$i];
    $label = $this->translate($a->getLabel());
?>
    <li <?php if ($i + 1 == $iend) : ?> class="active" <?php endif ?> >
        <?php if ($i + 1 != $iend) : ?>
            <a href="<?php echo $a->getHref(); ?>"><?php echo $label ?></a>
        <?php else : ?>
            <?php echo $label ?>
        <?php endif ?>
    </li>
<?php endfor ?>
</ol>
<?php endif ?>

And print on my template 

<?php echo $this->navigation()->breadcrumbs('Navigation')->setPartial('partial/breadcrumb.phtml'); ?>

Upvotes: 0

Emrah Mehmedov
Emrah Mehmedov

Reputation: 1501

I'm not sure if this will help you but the progress should be similar like: Here

More info: zf2 documentation Rendering breadcrumbs using a partial view script

Upvotes: 0

Related Questions